JS实现放大镜效果
首先我们先设想一下放大镜效果
1、当鼠标进入小盒子的时候，把大图片显示出来
2、当指定移动区域的时候，显示当前放大区域（放大效果）
3、鼠标移除我们让它消失
一、实现页面布局HTML+CSS
二、实现放大镜的功能js
下面来看代码，让你思路变清晰
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>放大镜</title>
<style>
#box{
width: 350px;
height: 350px;
margin: 100px 0 0 100px;
position: relative;
}
#small_box{
width:100%;
height: 100%;
border:1px solid #ccc;
position: relative;
}
#mask{
height: 100px;
width: 100px; left: 0px;
top: 0px;
position: absolute;
display: none;
cursor: move;
}
#big_box{
height: 600px;
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
top:0px;
left: 360px;
position: absolute;
display: none;
}
</style>
</head>
<body>
<div id="box">
<div id="small_box">
<img src="img/pic01.jpg" />
<span id="mask"></span>
</div>
<div id="big_box">
<img src="img/pic001.jpg" style="position: absolute;"/>
</div>
</div> <script>
window.onload = function(){
//1.获取需要的元素
var box = document.getElementById("box");
var small_box = document.getElementById("small_box");
var big_box = document.getElementById("big_box");
var mask = document.getElementById("mask");
var big_img = big_box.children[0]; //2.鼠标移入小盒子事件
small_box.onmouseover = function(){
//2.1鼠标移入，显示放大镜和大图片
big_box.style.display = 'block';
mask.style.display = 'block'; //2.2移动鼠标的同时移动放大镜,获取鼠标的移动事件
small_box.onmousemove = function(event){
// //获取鼠标的坐标点X Y
var pointX = event.clientX - box.offsetLeft - mask.offsetHeight*0.5;
var pointY = event.clientY - box.offsetTop - mask.offsetWidth*0.5; //做边界的校验
if(pointX<0){//当鼠标的坐标点X小于0的时候我们让它等于0，目的是让它不出去
pointX = 0;
}else if(pointX>small_box.offsetWidth-mask.offsetWidth){//当鼠标的坐标点大于（小盒子事件源宽度-指针区域事件源的宽度）时，我们就让它等于那个宽度，防止不出界。
pointX = small_box.offsetWidth-mask.offsetWidth;
} if(pointY<0){
pointY = 0;
}else if(pointY>small_box.offsetHeight-mask.offsetHeight){
pointY = small_box.offsetHeight-mask.offsetHeight;
} //移动mask
mask.style.left = pointX + 'px';
mask.style.top = pointY + 'px'; //移动大图
//小盒子中移动的距离：大盒子中移动的距离 = 小盒子的宽度：大盒子的宽度
//大盒子中移动的距离 = 小盒子中移动的距离/(小盒子的宽度：大盒子的宽度);
big_img.style.left = -pointX/(small_box.offsetWidth/big_box.offsetWidth)+'px';
big_img.style.top = - pointY/(small_box.offsetHeight/big_box.offsetHeight)+'px';
}
} //3.鼠标移除小盒子事件
small_box.onmouseout = function(){
//2.1鼠标移入，显示放大镜和大图片
big_box.style.display = 'none';
mask.style.display = 'none';
}
}
</script>
</body>
</html>
注意
移动大图
小盒子中移动的距离：大盒子中移动的距离 = 小盒子的宽度：大盒子的宽度大盒子中移动的距离 = 小盒子中移动的距离/(小盒子的宽度：大盒子的宽度);
big_img.style.left = -pointX/(small_box.offsetWidth/big_box.offsetWidth)+'px';
big_img.style.top = - pointY/(small_box.offsetHeight/big_box.offsetHeight)+'px';
里面的减号指的是方向，方向为反方向，这样才能可以实现你所预想的结果，你可以试一下没有减号的效果你就知道是什么样的了
其它不懂的地方欢迎留言