基本原理，左边有一个盛放图片的容器，里面有哥哥小的遮罩用来提示把那一部分展示到右边的大的展示放大之后的图片的部分
左边的小的遮罩层是根据鼠标的移动而移动的
需要用到几个鼠标事件 onmouseenter onmousemove onmouseleave
细心观察可以发现 左边的何用边的 容器 与元素之间是成比例的
左边的容器 比上元素 等于用变的 元素比上容器
还有就是 鼠标向左移动，图片会向右移动 意味着 要取一个 计算后的 相反数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<style type="text/css">
#min_wrap { position: absolute; width: 350px; border: 1px solid #ccc; }
#max_wrap { position: absolute; left: 370px; width: 400px; height: 400px; border: 1px solid #ccc; overflow: hidden; display: none; }
#max_wrap img { position: absolute; }
#slider { position: absolute; top: 0; left: 0; width: 175px; height: 175px; background-color: rgba(255,255,0,0.3); cursor: pointer; display: none; }
</style>
</head>
<body>
<div id="min_wrap">
<img src="images/min.jpg" alt="" />
<div id="slider"></div>
</div>
<div id="max_wrap">
<img src="images/max.jpg" alt="" />
</div>
</body>
<script type="text/javascript">
function magnifier(){
var minWrap = document.querySelector("#min_wrap");
var maxWrap = document.querySelector("#max_wrap");
var slider = document.querySelector("#slider");
var maxImg = maxWrap.children[0];
//鼠标移入
min_wrap.onmousemove = function (event) {
slider.style.display = "block";
maxWrap.style.display = "block";
var event = event || window.event;
//获取鼠标坐标
var disX = event.clientX - minWrap.offsetLeft;
var disY = event.clientY - minWrap.offsetTop;
//目的使移动滑块的中心对准鼠标坐标
var x = disX - slider.offsetWidth / 2;
var y = disY - slider.offsetHeight / 2;
//设定移动滑块的移动范围
var maxWidth = minWrap.clientWidth - slider.offsetWidth;
var maxHeight = minWrap.clientHeight - slider.offsetHeight;
if (x >= maxWidth){
x = maxWidth;
}else if( x <= 0){
x = 0;
}
if (y >= maxHeight){
y = maxHeight;
}else if(y <= 0){
y = 0;
}
slider.style.left = x + "px";
slider.style.top = y + "px";
//移动滑块的位置相对于可移动区域的比例
var scaleX = x / maxWidth;
var scaleY = y / maxHeight;
//maxWrap的偏移量等于移动比例乘以maxWrap的移动范围
maxWrap.scrollLeft = scaleX * (maxImg.offsetWidth - maxWrap.clientWidth);
maxWrap.scrollTop = scaleY * (maxImg.offsetHeight - maxWrap.clientHeight);
}
//鼠标移出放大镜相关功能隐藏
minWrap.onmouseleave = function (){
slider.style.display = "none";
maxWrap.style.display = "none";
}
}
magnifier();
</script>
</html>
网友评论