一个简单的JavaScript放大镜

来源：互联网发布：php开发实例大全怎么样编辑：程序博客网时间：2024/06/08 05:36
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<styletype="text/css">
* {
margin: 0;
padding: 0;
}
img {
vertical-align: top;
}
.fdj {
width: 350px;
height: 350px;
position: relative;
margin: 0pxauto;
border: 1pxsolidgainsboro;
}
.small {
position: relative;
}
.small img {
width: 350px;
}
.mask {
width: 100px;
height: 100px;
background: rgba(255,255,0,0.4);
position: absolute;
left: 0;
top: 0;
cursor: move;
display: none;
}
.big {
position: absolute;
top: 0;
left: -500px;
width: 500px;
height: 500px;
border: 1pxsolidgainsboro;
overflow: hidden;
display: none;
}
.big img {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<a>文章来源于网络 如有侵权请联系删除 </a>
<body>
<div class="fdj">
<div class="small">
<img src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
<div class="mask"></div>
</div>
<div class="big">
<img src="http://cdn.attach.qdfuns.com/notes/pics/201702/08/162503mw0fawb5b02va22i.jpg" />
</div>
</div>
</body>
<scripttype="text/javascript">
var fdj =document.querySelector('.fdj')// 获得最大的盒子
var small =document.querySelector('.small');//获取小图片盒子
var big =document.querySelector('.big');//获取大图片盒子
var bigs =big.children[0]//大图片
var smalls =small.children[0]//小图片
var mask =small.children[1];//遮罩

//鼠标移入小图片盒子
small.onmouseover =function() {
//鼠标移入图片盒子将遮罩与大图片显示
mask.style.display ='block';
big.style.display =' block';
};

//鼠标移出小图片盒子
small.onmouseout =function() {
//鼠标移出小图片盒子将遮罩与大图片隐藏
mask.style.display ='none';
big.style.display ='none';
};

var x =0;
var y =0;
//鼠标在小图片上移动时
small.onmousemove =function(ev) {
var ev =event ||window.event;
//让鼠标在遮罩正中
//鼠标X坐标与Y坐标
x = ev.clientX -this.offsetParent.offsetLeft -mask.offsetWidth /2;
y = ev.clientY -this.offsetParent.offsetTop -mask.offsetHeight /2;
//将遮罩限制在小图片盒子中

if (x <0) {
x = 0;
} else if (x >small.offsetWidth -mask.offsetWidth) {
x = small.offsetWidth -mask.offsetWidth;
}

if (y <0) {
y = 0;
} else if (y >small.offsetHeight -mask.offsetHeight) {
y = small.offsetHeight -mask.offsetHeight
}
mask.style.left =x +'px';
mask.style.top =y +'px';

//大图与小图的比例

/*var scalX = bigs.offsetWidth/small.offsetWidth;
var scalY = bigs.offsetHeight/small.offsetHeight;*/

var scalX =x / (small.offsetWidth -mask.offsetWidth);
var scalY =y / (small.offsetHeight -mask.offsetHeight);

bigs.style.left = -(x *scalX) +'px';
bigs.style.top = -(y *scalY) +'px';

};
</script>


</html>
阅读全文
0 0