css部分
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 430px;
height: 430px;
margin: 30px;
position: relative;
}
.small{
width: 430px;
height: 430px;
position: relative;
}
.small:hover{
cursor: move;
}
.small .mask{
width: 200px;
height: 200px;
background-image: url("../img/dd.png");
position: absolute;
left: 0;
top: 0;
display: none;
}
.big{
width: 430px;
height: 430px;
overflow: hidden;
position: absolute;
left: 110%;
top: 0;
display: none;
}
.big img{
position: absolute;
left: 0;
top: 0;
}
</style>
HTML部分
<div class='box'>
<!--小图容器-->
<div class='small'>
<img src="../img/goods1.jpg" alt="">
<!-- 放大镜蒙版 -->
<div class='mask'></div>
</div>
<!-- 大图的容器要小 图片能来回移动 -->
<div class='big'>
<img src="../img/goods2.jpg" alt="">
</div>
</div>
js
<script>
//小图存放的容器
var osmall=document.getElementsByClassName('small')[0];
var simg=osmall.children[0];
//蒙版
var omask=document.getElementsByClassName('mask')[0];
var obig=document.getElementsByClassName('big')[0];
var bimg=obig.children[0];
//鼠标移入事件
osmall.onmouseenter=function () {
omask.style.display='block';
obig.style.display='block';
}
//鼠标移动的过程中蒙版跟着动
osmall.onmousemove=function (e) {
//让鼠标的位置放在蒙版中间
var x=e.clientX-this.offsetParent.offsetLeft-omask.offsetWidth/2;
var y=e.clientY-this.offsetParent.offsetTop-omask.offsetHeight/2;
//限定蒙版移动的区域
if(x<0){
x=0;
}else if(x>osmall.offsetWidth-omask.offsetWidth){
x=osmall.offsetWidth-omask.offsetWidt;
}
if(y<0){
y=0;
}else if(y>osmall.offsetHeight-omask.offsetHeight){
y=osmall.offsetHeight-omask.offsetHeight;
}
omask.style.left=x+'px';
omask.style.top=y+'px';
//大图移动的位置 = 大图和小图的比值 * 小图移动的left和top偏移量(他们都是负值)
//因为是在大图的基础上移动,向右 向下。
var dX=bimg.offsetWidth/simg.offsetWidth
var dy=bimg.offsetHeight/simg.offsetHeight;
bimg.style.left=-x*dX+'px';
bimg.style.top=-y*dy+'px';
}
//鼠标移出
osmall.onmouseleave=function () {
omask.style.display='none';
obig.style.display='none';
}
</script>
图片素材
offsetWidth 自身的宽度 (计算padding和border)
clientWidth 自身 的宽度 (计算padding);
offSetParent 返回最靠近当前元素的上层元素(查找父级)。注意:这个元素的position(定位)必须不是static; 否则会找到body;
鼠标事件:
clientX clientY 鼠标在客户端视口中的坐标
pageX pageY 鼠标在页面中的坐标
两者在没有上下滚动条的情况下是一样的;