用JS实线放大镜的效果

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

HTML代码如下：

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

CSS代码如下：

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

JS代码：

         // 放大镜
         (function(){
              const LIWIDTH = 62;//li的宽度
              const OFFSET = 25;//ul的其实left
              const MSIZE =175;//mask的大小
              const SMIZE =350;//supermask的大小
              var count = document.querySelectorAll('#icon_list>li').length,//li的个数
                  moved =0,//左移的个数；
                  aBackward = document.querySelector('#preview a.backward'),//按钮
                  aForward = document.querySelector('#preview a.forward');//按钮
             aForward.addEventListener('click',move);
             aBackward.addEventListener('click',move);
             function move(){
                 if (this.className.indexOf('disabled')==-1) {////如果当前a的class中没有disabled,这里是说没有disabled才移动，有disabled的话就不运行下面的
                 if (this.className =='forward')                //代码
                     moved++;
                 else
                     moved--;
                  console.log(moved)//这里注意类的书写，如果类后面有多余的空格导致出错；
                  this.parentNode.lastElementChild.style.left = -moved*LIWIDTH+OFFSET+'px';
                  if (moved==0) {aBackward.className +=' disabled';}
                  else if(moved == count-5) aForward.className +=' disabled';
                  else {
                            aForward.className ='forward';
                            aBackward.className='backward';
                  }
             }
           }
           var Image = document.getElementById('mImg');
           //为id为icon_list的ul绑定鼠标进入事件:
           document.getElementById('icon_list').addEventListener('mouseover',function(e){
                 if (e.target.nodeName.toLowerCase() =='img') {//此处利用冒泡事件，给每个img元素绑定了鼠标移入事件、
                        var src = e.target.src.split('.')[0]+'-m.jpg';
                        Image.src = src;

                }
           })
           var sm=document.getElementById("superMask")
               mask=document.getElementById("mask"),
               lgDiv=document.getElementById("largeDiv");

             sm.addEventListener('mouseover',function(){
                 mask.style.display="block";
               lgDiv.style.display="block";
               var src = Image.src;
               var i = src.lastIndexOf('.');
               src = src.slice(0,i-1)+'l'+src.slice(i);
               lgDiv.style.backgroundImage = 'url('+ src+')';
             })
             sm.addEventListener("mouseout",
                   function(){
                        mask.style.display="";
                        lgDiv.style.display="";
     }
   );
             //为sm绑定鼠标移动事件
             var MAX=SMIZE-MSIZE;
             sm.addEventListener('mousemove',function(e){
               var x = e.offsetX,y = e.offsetY;
               var top = y-MSIZE/2,left = x-MSIZE/2;
               if(top <0) top =0;
               else if(top >MAX) top =MAX;
               if (left <0) left =0;
               else if (left >MAX) left =MAX;
                mask.style.cssText=
                  "display:block; left:"+left+"px; top:"+top+"px";
               lgDiv.style.backgroundPosition=
                   -left*16/7+"px "+ -top*16/7+"px";
             })