用JS实线放大镜的效果

Posted 2020-09-08 baoyadong

    今天花了点时间，复习了下使用原生JS实线放大镜的效果。在制作过程中，也是很到了一些问题，在这里总结下。

html代码如下：

 1 <div id="preview">
 2                 <div id="mediumDiv">
 3                     <img id="mImg" src="images/products/product-s1-m.jpg"/>//这是中级图片层
 4                     <div id="mask"></div>//这是遮罩
 5                     <div id="superMask"></div>//这是超级遮罩，作用是鼠标进入，1. 显示遮罩区域和图片放大区域；2提供鼠标移动区域
 6                 </div>
 7                 <div id="largeDiv"></div>//图片放大区域；
 8             <h1>
 9                 <a class="backward disabled"></a>
10                 <a class="forward"></a>//这里注意类的书写，有类名后面有多余的空格容易导致出错，一定要注意。
11                 <ul id="icon_list">
12                     <li><img src="images/products/product-s1.jpg" /></li>
13                     <li><img src="images/products/product-s2.jpg" /></li>
14                     <li><img src="images/products/product-s3.jpg" /></li>
15                     <li><img src="images/products/product-s4.jpg" /></li>
16                     <li><img src="images/products/product-s1.jpg" /></li>
17                     <li><img src="images/products/product-s2.jpg" /></li>
18                     <li><img src="images/products/product-s3.jpg" /></li>
19                     <li><img src="images/products/product-s4.jpg" /></li>
20                 </ul>
21             </h1>
22             </div>

CSS代码如下：

 1       #preview {position:absolute;top:0;left: 0;width: 352px;}
 2       #mediumDiv {border:1px solid #ddd;width: 350px;margin-bottom: 5px;text-align:center;position: relative;}
 3       #mediumDiv img { vertical-align:middle;width:350px;height:350px;}
 4       #mask {position:absolute;width: 175px;height: 175px;background: #ffa;opacity: 0.5;
 5               top:0;left:0;display: none;}
 6       #superMask {position: absolute;width: 350px;height: 350px;opacity: 0;left:0;top:0;cursor: move;}      
 7       #largeDiv {position: absolute;top:0;left:351px;width: 400px;height: 400px;border:1px solid #ddd;z-index: 3;background: #fff;display: none;}
 8       #preview h1 {width: 352px;overflow: hidden;position:relative;height: 54px;}
 9       #preview .backward ,#preview .forward{height: 54px;width: 17px;background-repeat: no-repeat;background: url(Images/iconlist_1.png);display: block;position: absolute; top:0;z-index: 1}
10       #preview .backward {background-position:0 -139px;left:0; }
11       #preview .forward {background-position: -17px -139px;right:0;}
12       #preview .backward:hover {background-position: -34px -139px;}
13       #preview .forward:hover {background-position: -51px -139px;}
14       #preview .backward.disabled {background-position: -68px -139px;}
15       #preview .forward.disabled {background-position: -85px -139px;}
16       #icon_list {position: absolute;left:25px;width: 496px;}
17       #icon_list li {float:left;border:1px solid #ddd;margin-right: 8px;width: 50px;height: 50px;text-align:center;padding:1px;}
18       #icon_list li:hover {border:2px solid #e4393c;padding:0;}
19       #icon_list li img {width: 100%;height: 100%;}

JS代码：

 1         // 放大镜
 2         (function(){
 3              const LIWIDTH = 62;//li的宽度
 4              const OFFSET = 25;//ul的其实left
 5              const MSIZE =175;//mask的大小
 6              const SMIZE =350;//supermask的大小
 7              var count = document.querySelectorAll(‘#icon_list>li‘).length,//li的个数
 8                  moved =0,//左移的个数；
 9                  aBackward = document.querySelector(‘#preview a.backward‘),//按钮
10                  aForward = document.querySelector(‘#preview a.forward‘);//按钮
11             aForward.addEventListener(‘click‘,move); 
12             aBackward.addEventListener(‘click‘,move); 
13             function move(){
14                 if (this.className.indexOf(‘disabled‘)==-1) {////如果当前a的class中没有disabled,这里是说没有disabled才移动，有disabled的话就不运行下面的
15                 if (this.className ==‘forward‘)                //代码
16                     moved++;
17                 else
18                     moved--;
19                  console.log(moved)//这里注意类的书写，如果类后面有多余的空格导致出错；
20                  this.parentNode.lastElementChild.style.left = -moved*LIWIDTH+OFFSET+‘px‘;
21                  if (moved==0) {aBackward.className +=‘ disabled‘;}
22                  else if(moved == count-5) aForward.className +=‘ disabled‘;
23                  else {
24                            aForward.className =‘forward‘;
25                            aBackward.className=‘backward‘;
26                  }
27             }
28           }
29           var Image = document.getElementById(‘mImg‘);
30           //为id为icon_list的ul绑定鼠标进入事件:
31           document.getElementById(‘icon_list‘).addEventListener(‘mouseover‘,function(e){
32                 if (e.target.nodeName.toLowerCase() ==‘img‘) {//此处利用冒泡事件，给每个img元素绑定了鼠标移入事件、
33                        var src = e.target.src.split(‘.‘)[0]+‘-m.jpg‘;
34                        Image.src = src;
35 
36                } 
37           })
38           var sm=document.getElementById("superMask")
39               mask=document.getElementById("mask"),
40               lgDiv=document.getElementById("largeDiv");
41          
42             sm.addEventListener(‘mouseover‘,function(){
43                 mask.style.display="block";
44               lgDiv.style.display="block";
45               var src = Image.src;
46               var i = src.lastIndexOf(‘.‘);
47               src = src.slice(0,i-1)+‘l‘+src.slice(i);
48               lgDiv.style.backgroundImage = ‘url(‘+ src+‘)‘;
49             })
50             sm.addEventListener("mouseout",
51                   function(){
52                        mask.style.display="";
53                        lgDiv.style.display="";
54     }
55   );
56             //为sm绑定鼠标移动事件
57             var MAX=SMIZE-MSIZE;
58             sm.addEventListener(‘mousemove‘,function(e){
59               var x = e.offsetX,y = e.offsetY;
60               var top = y-MSIZE/2,left = x-MSIZE/2;
61               if(top <0) top =0;
62               else if(top >MAX) top =MAX;
63               if (left <0) left =0;
64               else if (left >MAX) left =MAX;
65                mask.style.cssText=
66                  "display:block; left:"+left+"px; top:"+top+"px";
67               lgDiv.style.backgroundPosition=
68                   -left*16/7+"px "+ -top*16/7+"px";
69             })