用JS实现放大镜效果
效果图
布局
<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 id="img" src="images/big.jpg" width="800" alt=""/><!--大图-->
</div><!--大图-->
</div>
JS代码块
<script>
//获取需要操作的元素
var box = my$("box");
//小图的div
var small = box.children[0];
//遮挡层
var mask = small.children[1];
//大图的div
var big = box.children[1];
//大图
var bigImg = big.children[0];
//注册鼠标进入和移出的事件
box.onmouseover = function () {
mask.style.display = "block";
big.style.display = "block";
}
box.onmouseout = function () {
mask.style.display = "none";
big.style.display = "none";
}
//鼠标的移动事件
small.onmousemove = function (e) {
//设置鼠标在遮挡层的中间显示 //减去margin值 // 减100 : 主要是减去margin值所带来的影响
var x = e.clientX - mask.offsetWidth / 2 - 100;
var y = e.clientY - mask.offsetHeight / 2 - 100;
//设置横纵坐标的最大最小值
x = x < 0 ? 0 : x;
y = y < 0 ? 0 : y;
x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;
//给遮挡层赋值
mask.style.left = x + "px";
mask.style.top = y + "px";
//遮挡层的移动距离/大图的移动距离 = 遮挡层的最大移动距离/大图的最大移动距离
//求 大图的移动距离 = 遮挡层的移动距离 *大图的最大移动距离 / 遮挡层的最大移动距离
//大图的最大移动距离
var maxX = bigImg.offsetWidth - big.offsetWidth;
var maxY = bigImg.offsetHeight - big.offsetHeight;
//大图的移动距离
var bigImgX = x * maxX / (small.offsetWidth - mask.offsetWidth);
var bigImgY = y * maxY / (small.offsetHeight - mask.offsetHeight);
//给大图片赋值
bigImg.style.marginLeft = -bigImgX + "px";
bigImg.style.marginTop = -bigImgY + "px";
}
</script>