原理：
鼠标在小图片上移动时，通过捕捉鼠标在小图片上的位置，定位大图片的位置
注意
offsetWidth和offsetHeight是不包含滚动条的
style.left返回的是字符串
style.left是可读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left
style.left的值需要事先定义，否则取到的值为空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-放大镜特效</title>
<style>
*{margin: 0;padding: 0;}
#effect{
display: block;
width: 800px;
height: 450px;
margin: 20px;
border: 1px solid #c00;
}
#small-box{
position: relative;
}
#float-box{
display: none;
width: 160px;
height: 120px;
position: absolute;
background-color: #ffffcc;
border: 1px solid #0c0;
filter: alpha(opacity=50);
opacity: 0.5;
cursor: move;
}
#mark{
position: absolute;
display: block;
width: 800px;
height: 450px;
z-index:10;
background-color: #fff;
filter: alpha(opacity=0);
opacity: 0;
cursor: move;
border: 1px solid orange;
}
#big-box{
display: none;
position: absolute;
top: 20px;
left:850px ;
width: 800px;
height: 300px;
overflow: hidden;
border: 1px solid pink;
z-index: 1;
}
#big-box img{
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div id="effect">
<div id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
<img src="img/king2.jpg" alt="">
</div>
<div id="big-box">
<img src="img/king1.jpg" alt="">
</div>
</div>
<script>
window.onload=function () {
var effect=document.getElementById("effect");
var smallBox=document.getElementById("small-box");
var floatBox=document.getElementById("float-box");
var bigBox=document.getElementById("big-box");
var mark=document.getElementById("mark");
var bigBoxImg=document.getElementsByTagName("img")[1];
mark.onmouseover=function () {
floatBox.style.display="block";
bigBox.style.display="block";
};
mark.onmouseout=function(){
floatBox.style.display="none";
bigBox.style.display="none";
};
mark.onmousemove=function (e) {
var event=e||window.event;
var left=event.clientX-effect.offsetLeft-smallBox.offsetLeft-floatBox.offsetWidth/2;
var top=event.clientY-effect.offsetTop-smallBox.offsetTop-floatBox.offsetHeight/2;
if(left<0){
left=0;
}else if(left>(mark.offsetWidth-floatBox.offsetWidth)){
left=mark.offsetWidth-floatBox.offsetWidth;
}
if(top<0){
top=0;
}else if(top>mark.offsetHeight-floatBox.offsetHeight){
top=mark.offsetHeight-floatBox.offsetHeight;
}
floatBox.style.left=left+"px";
floatBox.style.top=top+"px";
var percentX=left/(mark.offsetWidth-floatBox.offsetWidth);
var percentY=top/(mark.offsetHeight-floatBox.offsetHeight);
bigBoxImg.style.left=-percentX*(bigBoxImg.offsetWidth-bigBox.offsetWidth)+"px";
bigBoxImg.style.top=-percentY*(bigBoxImg.offsetHeight-bigBox.offsetHeight)+"px";
}
}
</script>
</body>
</html>
网友评论