效果图
效果图
实现原理
借助宽高等比例放大的两张图片，结合js中鼠标偏移量、元素偏移量、元素自身宽高等属性完成；
左侧遮罩移动Xpx,右侧大图移动X*倍数px；其余部分就是用小学数学算一下就OK了。
完整事例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>放大镜</title>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.wrap {
height: 480px;
margin: 30px;
}
#small {
width: 300px;
height: 480px;
position: relative;
}
#small img {
width: 100%;
height: 100%;
}
.wrap div {
float: left;
margin-right: 10px;
}
#big {
width: 300px;
height: 480px;
overflow: hidden;
position: relative;
display: none;
}
#look_girl {
position: absolute;
left: 0px;
top: 0px;
}
#move {
width: 100px;
height: 100px;
background: #000;
opacity: 0.5;
position: absolute;
display: none;
left: 0px;
top: 0px;
}
</style>
</head>
<body>
<div class="wrap">
<div id="small">
<img src="https://blog-static.cnblogs.com/files/blogs/249892/girl.gif" />
<p id="move"></p>
</div>
<div id="big">
<img src="https://blog-static.cnblogs.com/files/blogs/249892/girl.gif" id="look_girl" />
</div>
</div>
<script type="text/javascript">
var move = document.getElementById('move');
var small = document.getElementById('small');
var big = document.getElementById('big');
var look_girl = document.getElementById('look_girl');
small.onmousemove = function (event) {
event = event || window.event;
this.style.cursor = 'move';
// 计算move移动块的left值
var move_left = event.clientX - this.offsetLeft - move.offsetWidth / 2;
// 计算move移动块的top值
var move_top = event.clientY - this.offsetTop - move.offsetHeight / 2;
// 超出左边界赋值为0
move_left = move_left < 0 ? 0 : move_left;
// 超出右边界赋值为盒子宽度-移动块的宽度
move_left = move_left > this.offsetWidth - move.offsetWidth ? this.offsetWidth - move.offsetWidth : move_left;
// 超出上边界赋值为0
move_top = move_top < 0 ? 0 : move_top;
// 超出下边界赋值为盒子高度-移动块高度
move_top = move_top > this.offsetHeight - move.offsetHeight ? this.offsetHeight - move.offsetHeight : move_top;
// 修改移动块left、top值
move.style.left = move_left + 'px';
move.style.top = move_top + 'px';
/*
计算图片需要移动的坐标
距离左边left 图片宽度 盒子宽度 距离左边left 图片宽度 盒子宽度
big_x/(look_girl.offsetWidth-big.offsetWidth) = move_left/(small.offsetWidth-move.offsetWidth);
big_y/(look_girl.offsetHeight-big.offsetHeight) = move_top/(small.offsetHeight-move.offsetHeight);
*/
var big_x = (move_left / (small.offsetWidth - move.offsetWidth)) * (look_girl.offsetWidth - big.offsetWidth);
var big_y = (move_top / (small.offsetHeight - move.offsetHeight)) * (look_girl.offsetHeight - big.offsetHeight);
// 修改图片定位
look_girl.style.left = -big_x + 'px';
look_girl.style.top = -big_y + 'px';
};
small.onmouseover = function () {
move.style.display = 'block';
big.style.display = 'block';
};
small.onmouseout = function () {
move.style.display = 'none';
big.style.display = 'none';
};
</script>
</body>
</html>
总结
- 鼠标焦点一旦动起来，它的偏移量就是动态的；父元素和子元素加上定位后，通过动态改变某个元素的left和top值来实现“动”的效果。
- 大图/小图=放大镜（遮罩）/取景框
- 两张图片一定要等比例缩放
