用JS实线放大镜的效果

Posted 2020-09-13 夏冷

html代码如下：

<div id="preview">
                <div id="mediumDiv">
                    <img id="mImg" src="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="images/products/product-s1.jpg" /></li>
                    <li><img src="images/products/product-s2.jpg" /></li>
                    <li><img src="images/products/product-s3.jpg" /></li>
                    <li><img src="images/products/product-s4.jpg" /></li>
                    <li><img src="images/products/product-s1.jpg" /></li>
                    <li><img src="images/products/product-s2.jpg" /></li>
                    <li><img src="images/products/product-s3.jpg" /></li>
                    <li><img src="images/products/product-s4.jpg" /></li>
                </ul>
            </h1>
            </div>

CSS代码如下：

#preview {position:absolute;top:0;left: 0;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:0;left:0;display: none;}
      #superMask {position: absolute;width: 350px;height: 350px;opacity: 0;left:0;top:0;cursor: move;}      
      #largeDiv {position: absolute;top:0;left:351px;width: 400px;height: 400px;border:1px solid #ddd;z-index: 3;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:0;z-index: 1}
      #preview .backward {background-position:0 -139px;left:0; }
      #preview .forward {background-position: -17px -139px;right:0;}
      #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:0;}
      #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";
            })