js实现图片放大镜效果—

之前写过一篇关于电商项目商品详情页面的图片放大镜效果：电商项目商品详情页的图片放大效果实现：https://blog.csdn.net/yehaocheng520/article/details/119003274?spm=1001.2014.3001.5501

当时是在vue项目中使用的，其实跟在js中原理也是一样的。

实现图片放大镜效果的重点就是下面的这张图了：

上面的方法中，右侧图片，为了实现放大，使用的是background背景图片的设置原理，给background-size设置大于1的参数，就可以实现图片的放大效果了。

下面介绍另一种方法来实现图片放大镜的效果：个人感觉下面的方法更简单。

1.`html`部分代码——左右布局，左侧有图片+选择框，右侧有图片

<div class="leftcon" id="left"><img src="img/风景-1.jpg"><div class="slide_box" id="box"></div>
</div>
<div class="rightcon" id="right"><img src="img/风景-1.jpg">
</div>

2.`css`部分——右侧大图直接设置`width` `height`百分比超过1，实现放大效果

.leftcon{width: 350px;height: 350px;margin: 100px 20px 0px 312px;float: left;position: relative;box-shadow:3px 3px 10px 0 #111111; /*给图片施加阴影效果 */-webkit-box-shadow: 3px 3px 10px 0 #111111;  /*兼容性处理*/-moz-box-shadow: 3px 3px 10px 0 #111111;
}
.leftcon img{width: 100%;height: 100%;
}.leftcon .slide_box{display:none;  /*将小方块盒子隐藏*/position:absolute;  top:0;  left:0;  width:175px;  height:175px;  background:#000;  opacity: 0.3;  cursor:move;  /*改变鼠标的形状*/
}.rightcon{display: none;  /*将右边div隐藏*/width: 350px;height: 350px;margin-top: 100px;float: left;overflow: hidden;position: relative;
}.rightcon img{width: 200%;height: 200%;position: absolute;left: 0px;top: 0px;
}

3.`js`部分——关键部分

1.首先获取到几个关键的`dom`元素

var leftone = document.getElementById('left');//获取左侧部分dom
var rightone = document.getElementById('right');//获取右侧部分dom
var box = documnent.getElementById('box');//获取选择框dom
var rimg = rightone.getElementsByTagName('img')[0];//获取右侧部分中的img数组的第一个

2.需要用到的参数——关于浏览器界面的参数

浏览器点击事件传递的事件源是event,代表对象的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，event是window的一个属性

event || window.event:就是事件源对象，这样写是为了兼容IE浏览器

根据上面的图片，我们可以看到几个相关的参数：
e.pageY:鼠标点击处距离页面最顶部的距离
e.pageX:鼠标点击处距离页面最左边的距离
oAppTop:就是左侧图片距离页面顶部的距离：也就是当前案例中的leftone.offsetTop
oAppLeft:就是左侧图片距离页面左边的距离：也就是当前案例中的leftone.offsetLeft
height:就是选择框的高度：也就是当前案例中的box.offsetHeight
width:就是选择框的宽度：也就是当前案例中的box.offsetWidth

通过上面的分析，可以得出：选择框的位置left top的大小：
var top = e.pageY - leftone.offsetTop - box.offsetHeight/2;
var left = e.pageX - leftone.offsetLeft - box.offsetWidth/2;

3.计算选择框出现的边界范围——因为选择框是相对于左侧图片的，因此最小值是0

var maxtop = leftone.offsetHeight - box.offsetHeight;//选择框的最大top值
var maxleft = leftone.offsetWidth - box.offsetWidth;//选择框的最大left值
var mintop = 0;//选择框的最小top值
var minleft = 0;//选择框的最小left值

4.判断选择框的边界范围

代码分析：

top是鼠标到浏览器的垂直距离减去左边div顶部到浏览器的垂直距离减去选择框的高度的一半，那么现在鼠标在选择框的中心，也就是说，top就等于选择框的顶部到左边的div的垂直距离，那么，如果top<0,就是说选择框和左边的div顶部重合，就让选择框的top值为0，即鼠标继续向上移动，选择框不再移动，从而让选择框的移动范围不能超过左边div的宽高范围

if(top < mintop){box.style.top = mintop + "px";mvtop = mintop;
}else if(top>maxtop){box.style.top = maxtop+'px';mvtop = maxtop;
}else{box.style.top = top +'px';mvtop = top;
}if(left < minleft){box.style.left = minleft + "px";mvleft = minleft;
}else if(left > maxleft){box.style.left = maxleft + "px";mvleft = maxleft;
}else{box.style.left = left + 'px';mvleft = left;
}

5.给右侧大图的位置赋值

rimg.style.top = -mvtop*2+‘px’
rimg.style.left = -mvleft*2+'px'

6.监听鼠标移动的事件——`onmouseomve`和`onmouseleave`

鼠标移动效果

leftone.onmousemove = function(e){var e = e||window.event;//判断事件源box.style.display = 'block';getPosition(e);//这个就是移动鼠标改变右侧图片位置的方法rightone.style.display = 'block';
}

鼠标移出效果

leftone.onmouseleave = function(e){var e = e||window.event;//判断事件源box.style.display = 'none';rightone.style.display = 'none';
}

完整`html`代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" href="img/favicon.ico" type="img/x-ico" /><title>Image Magnifying Glass</title><!-- 放大镜的原理: 左边图片100%显示，右边图片200%显示并定位，定义两个图片框，将图片放入，图片超出相框部分隐藏，移动滑块，根据滑块的位置，计算出右边图片的定位，从而形成映射效果，即图片放大镜 --><style type="text/css">body {margin: 0px;padding: 0px;}img {/* display: block; */}.leftcon {width: 350px;height: 350px;margin: 100px 20px 0px 312px;float: left;position: relative;box-shadow: 3px 3px 10px 0 #111111;/*给图片施加阴影效果 */-webkit-box-shadow: 3px 3px 10px 0 #111111;/*兼容性处理*/-moz-box-shadow: 3px 3px 10px 0 #111111;}.leftcon img {width: 100%;height: 100%;}.leftcon .slide_box {display: none;/*将小方块盒子隐藏*/position: absolute;top: 0;left: 0;width: 175px;height: 175px;background: #000;opacity: 0.3;cursor: move;/*改变鼠标的形状*/}.rightcon {display: none;/*将右边div隐藏*/width: 350px;height: 350px;margin-top: 100px;float: left;overflow: hidden;position: relative;}.rightcon img {width: 200%;height: 200%;position: absolute;left: 0px;top: 0px;}</style>
</head><body><div class="leftcon" id="left"><img src="img/风景-1.jpg" /><div class="slide_box" id="box"></div></div><div class="rightcon" id="right"><img src="img/风景-1.jpg" /></div>
</body>
<script>var leftone = document.getElementById("left");var rightone = document.getElementById("right");var box = document.getElementById("box");var rimg = rightone.getElementsByTagName("img")[0];// Event是获取事件对象，对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,envet是windows的一个属性。// 放大镜实现方法（获取右边图片定位）function getPosition(e) {//这里的参数e就是代表event//首先我们要去判断事件源,获取事件源,也就是evar e = e || window.event; //实现兼容//理解：//这个表达式写全是这样：var e=event?event||window.event;//如果存在event,那么var e=event;而如果不存在event，那么var e=window.event.那么可以看出确实能实现兼容var top = e.clientY - leftone.offsetTop - box.offsetHeight / 2;var left = e.clientX - leftone.offsetLeft - box.offsetWidth / 2;//理解：//e.clientY:返回事件触发时鼠标相对于元素视口的Y坐标。//e.clientX:返回事件触发时鼠标相对于元素视口的X坐标。//这里的元素视口实际上代指就是浏览器，clientX是鼠标距离浏览器左边框的距离，clientY是鼠标距离浏览器上边框的距离。//offsetTop获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置。这里就是左边的div相对于body即浏览器窗口的纵向距离//offsetLeft获取对象相对于版面或由offsetLeft属性指定的父坐标的计算顶端位置。这里就是左边的div相对于body即浏览器窗口的纵横向距离//offsetHeight是对象的可见高度。这里是指小滑块的高度//offsetHeight是对象的可见宽度。这里是指小滑块的宽度//这里为什么除以2?是因为我们不除以2的话,事件源也就是鼠标就在这个小滑块的的右下角,并不美观//我们要让鼠标位于滑块的中心,所以宽高各减去一半//边界判断var maxtop = leftone.offsetHeight - box.offsetHeight; //获取小滑块最大纵向移动距离var maxleft = leftone.offsetWidth - box.offsetWidth; //获取小滑块最大横向移动距离var mintop = 0; //获取小滑块最小纵向移动距离var minleft = 0; //获取小滑块最大纵向移动距离var mvtop; //定义小滑块的纵向移动距离var mvleft; //定义小滑块的横向移动距离// 判断if (top < mintop) {box.style.top = mintop + "px";mvtop = mintop;//理解：//top是鼠标到浏览器的垂直距离-左边div顶部到浏览器的垂直距离-小滑块的高度的一半。那么现在鼠标在小滑块的中心，也就是说，top就等于小滑块的顶部到左边div的垂直距离//那么，如果top<0,就是说小滑块和左边div顶部重合，就让小滑块的top值为0，即鼠标继续向上移动，小滑块不在移动，从而让小滑块的移动范围不能超过左边div的宽高范围//下方同理} else if (top > maxtop) {box.style.top = maxtop + "px";mvtop = maxtop;//如果top>maxtop,就是说小滑块和左边div底部重合，就让小滑块的top值为maxtop，即鼠标继续向下移动，小滑块不在移动，从而让小滑块的移动范围不能超过左边div的宽高范围} else {box.style.top = top + "px";mvtop = top;//不超过边界，则小滑块的垂直移动距离就等于top,即小滑块的顶部到左边div的垂直距离}if (left < minleft) {box.style.left = minleft + "px";mvleft = minleft;} else if (left > maxleft) {box.style.left = maxleft + "px";mvleft = maxleft;} else {box.style.left = left + "px";mvleft = left;}//因为右边div的图片是左边div的图片的两倍,而左边div和右边div都是小滑块的宽高的两倍，而要让右边div放大左边的小滑块的包围图片，所以右边大图的定位坐标是小滑块的两倍，这样才能进行映射//右侧图片跟着运动:左侧小滑块移动多少，右侧跟着移动他的2倍即可rimg.style.top = -mvtop * 2 + "px";rimg.style.left = -mvleft * 2 + "px";}// 左侧盒子鼠标移入，小滑块和右侧图片显示,衔接鼠标移动效果//onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡。//该事件通常与 onmouseleave 事件一同使用。// leftone.onmouseenter = function(e){//    var e=e||window.event; //判断事件源//   box.style.display = "block";//     getPosition(e);//     rightone.style.display = "block";// }//鼠标移动效果leftone.onmousemove = function(e) {var e = e || window.event; //判断事件源box.style.display = "block";getPosition(e);rightone.style.display = "block";};//鼠标移出效果leftone.onmouseleave = function(e) {var e = e || window.event; //判断事件源box.style.display = "none";rightone.style.display = "none";};
</script>
</html>