【京东详情页】——原生js爬坑之放大镜

一、引言

在商城的详情页中，放大镜的功能是很常见的。这里京东详情页就要做一个仿放大镜的效果，预览如下：

 

二、实现原理

实际上，放大镜的实现是单纯用几个div，鼠标移入其中一个小图div，触发事件显示另一个div中的大图。

并非真的使用了某种flash或插件之类，用到放大的效果。所以，网页中的放大镜功能都是模拟。

1、移动功能

 小坑：ul有left ，左边距不为0，有20px的间距，所以，应到的位置要加20px作为抵消。

const  LiWIDTH=62；//li的宽
const  OFFSET=20;//ul的起始left

注意：在程序中，尽量不要把数值写死，万一后面再改需求的时候，要改变数值，就不方便了。

• 当li总个数 - moved左移的li个数 =  5时，后面的backward按钮禁用

• 当moved左移的个数 = 0时，前面的forward按钮禁用

    var LICOUNT = document.querySelectorAll(
        "#icon_List>li"
    ).length;//所有li的个数
    var moved = 0;//左移的li个数
    var aForward=document.querySelector("a.forward");
    var aBackward=document.querySelector("a.backward");
    aForward.addEventListener("click", li_move);
    aBackward.addEventListener("click", li_move);
    function li_move(){
        //this->a
        //如果当前a的class中没有disabled
        if(this.className.lastIndexOf("disabled")==-1){
        if(this.className=="forward"){
            moved++;
        }else{
            moved--;
        }
        //设置ul的left为-LIWIDTH*moved+OFFSET
        this.parentNode.lastElementChild.style
            .left=-LIWIDTH*moved+OFFSET+"px";
        checkA()
        }
    }
    //检查两个a的状态
    function checkA(){
          if(moved==0){
              aBackward.className+=" disabled"//因为是加className 所以disable前要有空格
          }else if(LICOUNT-moved==5){
              aForward.className+=" disabled"
          }else{
              aBackward.className="backward";
              aForward.className="forward";
          }
    }

以上：实现小图预览列表的“移动”功能。

2、大图变换

小坑：和小图对应一样的大图显示

规律：大图和小图的图片命名基本一样，唯一不同的地方——大图多加一个“-m”。

解决方法：获得小图的img的src，在后面加“-m”，把新路径设置给大图的mImg的src中。

小坑：小图预览列表有8个，如果每一个都要加“鼠标移入/移出”事件，太繁琐。

解决方法：把事件“鼠标移入/移出”绑定给整个ul，但触发的区域，要设置为img，只有目标元素是img时，才能执行事件。

var mImg=document.getElementById("mImg");
 //为id为icon_list的ul绑定鼠标进入事件:    document.getElementById("icon_list").addEventListener("mouseover",
       function(e){
           if(e.target.nodeName=="IMG"){
               var src= e.target.src;//获得当前小图片src
               var i=src.lastIndexOf(".");//获得最后一个.的位置
               src=src.slice(0,i)+"-m"+src.slice(i);  //在最后一个.前拼-m
               mImg.src=src;//设置mImg的src为src
           }
       }
    )

3、透明遮罩

小坑：mask为小的半透明遮罩，superMask是为了分担img元素事件处理负担的一个辅助div。

原因：因为img的负担很重，它要把图片下载下来，要一点一点的画出来，已经很有负担。之后，在触发事件mousemove时，还要用到它，而且极其的频繁。哪怕移动到一个很小的地方，也会触发这个mousemove事件，这么频繁的触发，这个事件处理它处理不了。结果，就是会导致很卡，img元素反应不过来。

解决方法：在img上面套一个和img一样大的div。这样做的好处是，看着也是在图片上移动，但superMask帮img分担了事件处理这份工作。所以之后的所有事件都要绑定在superMask身上，而不要绑定在img身上。（事件：鼠标移入/移出/移动）

大坑：遮罩如果不限制移动范围，会超出指定大图显示区域。

解决方法：top，left在计算完成之后，不能马上设置，还要做一点加工。设置移动的最大范围值MAX，当top或left计算值小于0时，设为0，大于MAX时，设为MAX。

const MSIZE=175;//mask的大小
const SMSIZE=350;//superMask的大小
   //获得id为superMask的div
   var sm=document.getElementById("superMask");
    var mask=document.getElementById("mask");
    sm.addEventListener("mouseover",
        function(){
            mask.style.display="block";
        }
    );
    sm.addEventListener("mouseout",
        function(){
            mask.style.display="";
        }
    );
    var MAX=SMSIZE-MSIZE;
   //为sm绑定鼠标移动事件
    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";
        }
    )

4、放大镜

div显示图片的原理：背景图片，设置src，和前面一样，获得mImg的src，把后面的“-m”改为“-l”，新路径设置成div的背景图片。

var lgDiv=document.getElementById("largeDiv");
    sm.addEventListener("mouseover",
        function(){
            mask.style.display="block";
            lgDiv.style.display="block";
            var src=mImg.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="";
        }
    );
    var MAX=SMSIZE-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*2+"px "+ -top*2+"px";
        }
    )

---

 注：转载请注明出处