用JS逐步分解实现放大镜（看完就有收获）

文章目录

案例描述
案例图示
HTML
CSS样式
JS代码
- JS分解代码----小图点击事件
- JS分解代码----鼠标进入和移出
- JS分解代码----鼠标的移动
- JS分解代码----碰撞事件，放大镜的移动
- JS分解代码----超大图的位置改变
- JS全部代码展示

案例描述

在浏览器的左边有一张大图，下面有两张小图，点击任何一张小图会在大图的位置显示这张小图的画面。进入大图，鼠标所指之处有一个透明的黄色区域，而在大图的右边（以下称超大图）会放大这一区域

案例图示

HTML

<body><div id="box"><div id="small"><img src="./program1/images/1.jpg" ><span id="mask"></span></div><div id="big"><img src="./program1/images/1.jpg" ></div></div><div id="list"><ul><li><img src="./program1/images/1.jpg" width="100px"></li><li><img src="./program1/images/2.jpg" width="100px"></li></ul></div>
</body>

CSS样式

详解请看注释

<style>* {padding: 0;margin: 0;box-sizing: border-box;list-style: none;border: none;}#box {width: 250px;height: 160px;margin-left: 100px;margin-top: 100px;position: relative;}#small {width: 100%;height: 100%;border: 1px solid #ccc; /* 放大镜操作 */position: relative;       }#small img{width: 100%;height: 100%;padding: 2px;}/* 显微镜 */#mask {width: 50px;height: 50px;/* 透明图 */background-color:rgba(255, 255, 0,.4);position: absolute;left: 0;top: 0;cursor: move;/* 隐藏 */display: none;}#big {width: 400px;height: 255px;border: 1px solid #ccc;/* 为以后大图位置改变作准备 */position: absolute;/* 250 + 10 margin */left: 260px;     top: 0;/* 图片超出部分隐藏 */overflow: hidden;/* 整个大图开始是隐藏的 */display: none;}#big img {width: 700px;padding: 2px;position: absolute;left: 0;top: 0;margin: 0 auto;background-color: red;}#list {margin-top: 5px;margin-left: 100px;}#list li {float: left;margin-right: 5px;cursor: pointer;}
</style>

JS代码

JS分解代码----小图点击事件

（1）首先设置一个value属性用于改变small_img中的图片src，value的值为其下标+1
（2）监听li中的点击事件时，要改变small_img（大图）中的图片展示和big_img（超大图）中的图片展示

 for (let i = 0; i < allLi.length; i++) {var li = allLi[i];//设置一个value属性用于改变small_img中的图片srcli.setAttribute('value',i+1);//监听li中的点击事件li.addEventListener('click',function(){//改变small_img中的图片展示small_img.setAttribute('src',"./program1/images/" + this.getAttribute('value') +".jpg");//改变big_img中的图片展示big_img.setAttribute('src',"./program1/images/" + this.getAttribute('value') +".jpg");});}

JS分解代码----鼠标进入和移出

鼠标进入和移出都要改变放大镜和超大图的display属性。
进入时display属性值为*“block”*
移出时display属性值为*“none”*

//监听鼠标进入boxbox.addEventListener('mouseover',function() { //放大镜显示mask.style.display = 'block';//big图片显示big.style.display = 'block';       });//监听鼠标移出boxbox.addEventListener('mouseout',function(){//放大镜隐藏mask.style.display = 'none';//big图片隐藏big.style.display = 'none';})});

JS分解代码----鼠标的移动

在鼠标进入事件中监听鼠标的移动
这里运用到事件对象和offset家族的知识
可以参考：
事件对象
offset家族
注意事项看注释

 //监听鼠标的移动
small.addEventListener('mousemove',function(event){//事件对象
var e = event || window.event;
//获取鼠标的位置  鼠标显示在mask中间:减去自身宽高度的一半
//最好用pageX、pageY，不要用clientX、clientY 防止有分页时出错var small_x = event.pageX - box.offsetLeft - mask.offsetWidth*0.5;
var small_y= event.pageY - box.offsetTop - mask.offsetHeight*0.5;

JS分解代码----碰撞事件，放大镜的移动

写完上述代码，你会发现放大镜也能去到大图以外的区域，这不是我们所期望的，这里就需要用到碰撞事件了
这里还是用到了offset家族的知识
这里用到的思维是用if判断条件限制上下左右的边界
放大镜的移动就是改变它的top和left值（因为它相对父元素绝对定位）
不理解offset，请参考：offset家族
注意事项看注释


//放大镜碰撞    //相对于box  因为box有定位
if(small_x <= 0)small_x = 0;
else if( small_x >= box.offsetWidth-mask.offsetWidth)small_x = box.offsetWidth-mask.offsetWidth - 2;   //除去边框
if(small_y <= 0)small_y = 0;
else if( small_y >= box.offsetHeight-mask.offsetHeight)small_y = box.offsetHeight-mask.offsetHeight - 2;//放大镜跟着鼠标的位置
mask.style.left = small_x + 'px';
mask.style.top = small_y + 'px';

JS分解代码----超大图的位置改变

big_img.style.left 和 big_img.style.top为负值（你可以试试去掉负号是什么样的效果）
这里的重点是这个公式

 //big_img中的位置相应改变
//公式：small_x/big_x = small_width/big_img_widthbig_img.style.left = - (event.pageX - box.offsetLeft) /(small.offsetWidth / big.offsetWidth) + 'px';
big_img.style.top = -( event.pageY - box.offsetTop)/( small.offsetHeight / big.offsetHeight) + 'px';

JS全部代码展示

<script>window.addEventListener ('load',function(){//获取元素var small = $('small');var big = $('big');   var mask = $('mask');var allLi = document.getElementsByTagName('li');var small_img = small.children[0];var big_img = big.children[0];//遍历每一个li中的点击事件for (let i = 0; i < allLi.length; i++) {var li = allLi[i];//设置一个value属性用于改变small_img中的图片srcli.setAttribute('value',i+1);//监听li中的点击事件li.addEventListener('click',function(){//改变small_img中的图片展示small_img.setAttribute('src',"./program1/images/" + this.getAttribute('value') +".jpg");//改变big_img中的图片展示big_img.setAttribute('src',"./program1/images/" + this.getAttribute('value') +".jpg");});}//监听鼠标进入boxbox.addEventListener('mouseover',function() { //放大镜显示mask.style.display = 'block';//big图片显示big.style.display = 'block';//监听鼠标的移动small.addEventListener('mousemove',function(event){//事件对象var e = event || window.event;//获取鼠标的位置  鼠标显示在mask中间:减去自身宽高度的一半//最好用pageX、pageY，不要用clientX、clientY 防止有分页时出错var small_x = event.pageX - box.offsetLeft - mask.offsetWidth*0.5;var small_y= event.pageY - box.offsetTop - mask.offsetHeight*0.5;//放大镜碰撞    // console.log(mask.offsetLeft) ;//相对于box  因为boxx有定位if(small_x <= 0)small_x = 0;else if( small_x >= box.offsetWidth-mask.offsetWidth)small_x = box.offsetWidth-mask.offsetWidth - 2;   //除去边框if(small_y <= 0)small_y = 0;else if( small_y >= box.offsetHeight-mask.offsetHeight)small_y = box.offsetHeight-mask.offsetHeight - 2;//放大镜跟着鼠标的位置 mask.style.left = small_x + 'px';mask.style.top = small_y + 'px';//big_img中的位置相应改变//公式：small_x/big_x = small_width/big_img_widthbig_img.style.left = - (event.pageX - box.offsetLeft) /(small.offsetWidth / big.offsetWidth) + 'px';big_img.style.top = -( event.pageY - box.offsetTop)/( small.offsetHeight / big.offsetHeight) + 'px';});});//监听鼠标移出boxbox.addEventListener('mouseout',function(){//放大镜隐藏mask.style.display = 'none';//big图片隐藏big.style.display = 'none';})});//封装function $(id) {return typeof id === 'string'? document.getElementById(id):null;}
</script>