总体思路:
一、布局:
首先,应有2张图片,一张小,一张大。
然后设置2个div,把大小图片各放进一个div里并隐藏大的div,
小图片所在的div里再设置一个div用来做遮罩层,遮罩层隐藏,布局完成.
注意,大图片所在的div的宽高不能超过大图片的宽高!
二、注册鼠标进入、移动、移出事件
当鼠标进入小图所在的div时,应该显示遮罩层,显示大图所在的div,当鼠标移出的时候应该隐藏。
并且当鼠标进入小图所在的div时,应该让遮罩层跟随鼠标移动,并让鼠标在遮罩层的最中间位置。
三、限制遮罩层的移动范围,让遮罩层出不去!
由于鼠标一直在遮罩层上,因此当鼠标出去的时候,大图所在的div是检测不到鼠标是否出去的, 导致遮罩层也能够出去,所以应限制遮罩层的移动范围。
而遮罩层的最大移动范围是:小div的宽度-遮罩层的宽度
遮罩层的最小移动范围是:0 (遮罩层为absolute,小div为relative)
四、设置比例问题,当小图移动的时候,大图也跟着动,且移动方向相反。
有一个公式: 遮罩层的移动距离/大图的移动距离 = 遮罩层的最大移动距离/大图的最大移动距离 (!important)
我们所需要的就是大图的移动距离。
遮罩层的水平移动距离:x ;
遮罩层的最大移动距离:小div的宽度 - 遮罩层的宽度 ;
大图的最大移动距离 : 大图的宽度 - 大div的宽度 ;
(还需计算竖直方向的移动距离)
得出大图的移动距离后,直接用marginLeft和marginTop去设置大图的移动就行了。
注意值为反方向!
Html代码如下:
<div class="box" id="box">
<div class="small"><!--小层-->
<img src="images/small.png" width="350" alt=""/>
<div class="mask"></div><!--遮挡层-->
</div><!--小图-->
<div class="big"><!--大层-->
<img src="images/big.jpg" width="800" alt=""/><!--大图-->
</div><!--大图-->
</div>
Css代码如下:
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
cursor: move;
display: none;
}
.small {
position: relative;
}
JS代码如下:
<script type="text/javascript">
var oBox = document.getElementById("box");
var oSmall = oBox.children[0];
var oBig = oBox.children[1];
var oMask = oSmall.children[1];
var oBigImg = oBig.children[0];
oBox.onmouseenter = function () {
oBig.style.display = "block";
oMask.style.display = "block";
oSmall.onmousemove = function (e) {
// 让遮罩层在鼠标中间
var oW = oMask.offsetWidth / 2 ;
var oH = oMask.offsetHeight / 2;
// 100是因为有margin值100
var x = e.clientX-100-oW;
var y = e.clientY-100-oH;
// 遮罩层最大的移动距离 就是外层的宽度减去遮罩层的宽度
var maxWidth = oSmall.offsetWidth - oMask.offsetWidth;
var maxHeight = oSmall.offsetHeight - oMask.offsetHeight;
//如果超出了最小宽度就让他等于最小宽度 这是限制遮罩层出不去!
x = x<0?x=0:x;
y = y<0?y=0:y;
// 如果超出了最大宽度就让他等于最大宽度 这是限制遮罩层出不去!
x = x>maxWidth?maxWidth:x;
y = y>maxHeight?maxHeight:y;
//小图的移动距离/大图的移动距离 = 小图的最大移动距离/大图的最大移动距离
//大图的移动距离 = 小图的移动距离*大图的最大移动距离/小图的最大移动距离
//得出大图的最大移动距离/小图的最大移动距离,是一个比例
var bili = (oBigImg.offsetWidth - oBig.offsetWidth) / maxWidth ;
//得出大图的水平移动距离
var bigImgMoveX = x * bili;
//得出大图的垂直移动距离
var bigImgMoveY = y * bili;
//遮罩层的移动距离
oMask.style.left = x + "px";
oMask.style.top = y + "px";
//大图的移动跟遮挡层的移动是相反的
oBigImg.style.marginLeft = -bigImgMoveX + "px";
oBigImg.style.marginTop = -bigImgMoveY + "px";
}
oBox.onmouseleave = function () {
oBig.style.display = "none";
oMask.style.display = "none";
}
}
</script>
练习用图如下: