用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";

             })