【純原生JS】 我居然用onmouseover+onmouseout+onmousemove滑鼠事件來實作了商品放大鏡效果 明白了 原來還可以這麼幹 附上源代碼檔案

作者：極客小俊

公衆号:同名

前言😃

商品的放大鏡效果相信逛過商城的朋友應該都見過吧，代碼邏輯其實也很簡單!

隻要你掌握了

onmouseover+onmouseout+onmousemove

以及

事件對象

和一點點的

DOM

操作就可以輕松幾行

JS代碼

實作出來!

準備工作 🧐

搞幾張圖檔來當素材吧， 我這裡準備的是一張大圖

800x 800

小圖

450x450

就可以了

接下來直接上代碼

HTML結構 ☘️

<div id="div1">
        <!--小圖-->
        <div class="small_pic">
            <span class="mark"></span>
            <span class="float_layer"></span>
            <img  src="img/small.jpeg" longdesc="" />
        </div>

         <!--大圖-->
        <div class="big_pic">
            <img  src="img/big.jpeg" alt="" longdesc="" />
        </div>
</div>
           

html

布局結構的方式其實是有多種多樣的，這也影響後期的

js

效果設計

CSS樣式 🥳

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}

#div1 { width:450px; height:450px; padding: 5px; border: 1px solid #ccc; position: relative; left: 50px; top:30px;}

#div1>.small_pic>.float_layer { width: 100px; height: 100px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1>.small_pic>.mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1>.small_pic>.mark:hover{ cursor: move;}

#div1>.big_pic { position: absolute; top: -1px; left: 480px; width:500px; height:500px; overflow:hidden; border:2px solid #CCC; display:none; }

#div1>.big_pic>img { position:absolute; top: 0px; left: 0px; }
           

其實有時候覺得

css

還是很重要的，畢竟

css

寫好了 對後期

js

的整體代碼邏輯也有一定影響的 這一點大家注意哈! hohohoho 🥳🥳🥳

javascript代碼邏輯

function getByClass(obj,cName){
         var List=obj.getElementsByTagName("*");
         var arr=[];
         var i=0;
         var len=List.length;
         for(i=0;i<len;i++){
             if(List[i].className===cName){
                 arr.push(List[i]);
             }
         }
         return arr;
 }

 window.onload=function () {

     var _div1=document.getElementById("div1");
     var _mark=getByClass(_div1,'mark')[0];
     var _floatLayer=getByClass(_div1,'float_layer')[0];
     var _bigPic=getByClass(_div1,'big_pic')[0];
     var _smallPic=getByClass(_div1,'small_pic')[0];
     var _Img=_bigPic.getElementsByTagName("img")[0];

     _mark.onmouseover=function(){
         _floatLayer.style.display="block";
         _bigPic.style.display="block";
     }

     _mark.onmouseout=function(){
         _floatLayer.style.display="none";
         _bigPic.style.display="none";
     }
     _mark.onmousemove=function(event){
          var e=event || window.event;
          var X=e.clientX-_div1.offsetLeft-_smallPic.offsetLeft-(_floatLayer.offsetWidth/2);
          var Y=e.clientY-_div1.offsetTop-_smallPic.offsetTop-(_floatLayer.offsetHeight/2);
          if(X<0){
             X=0;
          }
         if(Y<0){
             Y=0;
         }
         if(X>(_mark.offsetWidth-_floatLayer.offsetWidth)){
             X=(_mark.offsetWidth-_floatLayer.offsetWidth);
         }
         if(Y>(_mark.offsetHeight-_floatLayer.offsetHeight)){
             Y=(_mark.offsetHeight-_floatLayer.offsetHeight);
         }

         _floatLayer.style.left=X+'px';
         _floatLayer.style.top=Y+'px';

         var _Px=X/(_mark.offsetWidth-_floatLayer.offsetWidth);
         var _Py=Y/(_mark.offsetHeight-_floatLayer.offsetHeight);

         //大圖移動
         _Img.style.left=-_Px*(_Img.offsetWidth-_bigPic.offsetWidth)+'px';
         _Img.style.top=-_Py*(_Img.offsetHeight-_bigPic.offsetHeight)+'px';
     }
 }

           

有興趣的朋友可以直接下載下傳代碼去試試，修改一下圖檔就可以馬上使用!! 😁😁 【方言: 就等你說要不要的!】

最終效果

如圖

"👍點贊"

"✍️評論"

"收藏❤️"

大家的支援就是我堅持下去的動力!

如果以上内容有任何錯誤或者不準确的地方，🤗🤗🤗歡迎在下面 👇👇👇 留個言指出、或者你有更好的想法，歡迎一起交流學習❤️❤️💛💛💚💚