用JS作一個簡單的電商產品放大鏡功能

使用js製做一個簡單的產品放大圖

　　購物網站的產品頁常常會放有一個產品展現圖區。該圖區有一個功能就是產品圖的放大功能，移動左側的焦點區域，能夠放大細節部分觀看，詳情以下圖。實現該功能的方法也很是簡單。

　　實驗：製做產品焦點放大圖。

　　所需技能：一、基本的獲取頁面元素的方法；

　　　　　　　二、幾個簡單的事件；

　　　　　　　三、會使用dom設置元素的屬性；

　　案例原理：一、焦點框的跟隨鼠標事件；

　　　　　　　二、焦點框的移動區域規定；

　　　　　　　三、大盒子內容的顯示；

　　適合對象：js初學者

　　-------------------------------------------------------------------開始！-------------------------------------------------------------

　　1、首先咱們準備CSS樣式，CSS樣式中須要注意的幾個點是：

（1）焦點圖絕對定位，默認display：none；

（2）右側顯示大圖的盒子（如下簡稱大圖框）默認display：none；大圖框中的內容在溢出盒子後要隱藏overflow：hidden；

 

　2、開始書寫script代碼：

（1）首先獲取頁面元素：

1 //首先或許要操做的元素
2     function getId(tag){　　　　　　　　　　　　　　　　//定義一個用id獲取元素的方法，減小不少工做量！
3         return document.getElementById(tag)
4     }
5     var box=getId("box");
6     var small=getId("small");
7     var mask=getId("mask");
8     var big=getId("big");
9     var pic=big.children[0];　　　　　　　　　　　　　　//這裏是經過節點的方法獲取元素

（2）明確鼠標移動到小圖上會出現兩個事件：1）焦點框要出來；2）大圖框要顯示出來。同理鼠標移除後這兩個事件要取消

1 //鼠標移動到圖片上出現兩個效果
2     small.onmouseover=function(){
3         mask.style.display="block";
4         big.style.display="block";
5     }
6     small.onmouseout=function(){
7         mask.style.display="none";
8         big.style.display="none"
9     }

（3）設置焦點框的跟隨：

　　1）當設置焦點框的跟隨時，咱們的跟隨事件是事實發生的，因此此處的事件類型再也不是onmouseover；而是onmousemove;

　　2）這段代碼中涉及到的問題主要是一個mask（焦點框）的定位計算問題，容易忽略的問題是mask是相對誰的位置移動的？個人css樣式中mask是放在small這個盒子中的，因此相對移動的位置必定是其已經定位的父元素small的位置。因此我用clientX，clientY獲取的相對於瀏覽器當前窗口的位置座標不能直接使用，必須減去其父盒子的margin值的影響。

//設置小圖的焦點框，跟隨鼠標；
    small.onmousemove=function(e){
        var marginL=box.offsetLeft;　　　　　　　　　　　　　　　　//使用offsetLeft方法得到box的margin-left
        var marginT=box.offsetTop;　　　　　　　　　　　　　　　　　//使用offsetTop方法得到box的margin-top
        var currentX= e.clientX;　　　　　　　　　　　　　　　　
        var currentY= e.clientY;　　　　　　　　　　　　　　　　　　//使用e.clientX和e.clinetY相對於瀏覽器的左上角的位置　　　　　
        var x=currentX-marginL-mask.offsetWidth/2;　　　　　　　　
        var y=currentY-marginT-mask.offsetHeight/2;　　　　　　　//要想使焦點框的中心對齊鼠標，還須要減去焦點框的寬高的一半
/----------------------此處一下子還要插入其餘代碼/---------------------------/
        mask.style.left=x+"px";
        mask.style.top=y+"px";    　　　　　　　　　　　　　　　　　//改變焦點框的位置　

（4）閒置焦點框的位置的移動

1）上一步執行完成後焦點框的移動是不受任何閒置的，在咱們瀏覽購物網站的過程當中，明顯能夠感覺到焦點框不允許移動的小圖的外面，形成很差的用戶體驗；

2）要限制焦點框的移動，主要是x，y變化超過允許值時，給他一個固定的值；

 1  //設置小圖的焦點框，跟隨鼠標；
 2     small.onmousemove=function(e){
 3         var marginL=box.offsetLeft;
 4         var marginT=box.offsetTop;
 5         var currentX= e.clientX;
 6         var currentY= e.clientY;
 7         var x=currentX-marginL-mask.offsetWidth/2;
 8         var y=currentY-marginT-mask.offsetHeight/2;
 9 
10         //給焦點框設置移動區域
11         if(x<0){x=0;}
12         if(x>small.offsetWidth-mask.offsetWidth)
13 　　　　　　{x=small.offsetWidth-mask.offsetWidth};　　　　　//　用於定位的x的最小值是0，最大值是small的長度減去mask的長度 y軸線同理
14         if(y<0){y=0;}
15         if(y>small.offsetHeight-mask.offsetHeight)
　　　　　　　　{y=small.offsetHeight-mask.offsetHeight};
16         mask.style.left=x+"px";　　　　　　　　　　//注意在規定移動區域後再寫mask的移動公式，注意代碼的執行順序
17         mask.style.top=y+"px";

（5）設置大圖的顯示

1）在big盒子中實現圖片的移動，應該想到-margin值；

2）移動多少距離能夠利用一個固定比例乘以mask的left和top值，想一下焦點區的左上角和大圖框的左上角顯示的位置是相同的！！！這一點就不是很難理解了

1  //設置大盒子中顯示的內容
2         var relativeX=mask.offsetLeft;
3         var relativeY=mask.offsetTop;
4         var proporationX=pic.offsetWidth/small.offsetWidth;　　　　　　//設置比例
5         var proporationY=pic.offsetHeight/small.offsetWidth;
6         pic.style.marginLeft=-relativeX*proporationX+"px";　　　　　　//注意！margin的值必須是負值，「px不要丟掉
7         pic.style.marginTop=-relativeY*proporationY+"px";

 

　　到這一步咱們的這個demo也就作完了！是否是很簡單

　　下面我將整個代碼粘貼出來，但願能和你們討論交流。

---

 

　　這裏是css代碼

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            margin: 50px;

        }

        #small {
            width: 229px;
            height: 250px;
            border: 1px solid black;
            text-align: center;
            position: relative;
            float: left;
        }

        #mask {
            width: 100px;
            height: 100px;
            background-color: rgba(214, 111, 193, 0.3);
            position: absolute;
            top: 0;
            left: 0;
            /*display: none;*/
        }
        #big {
            width: 350px;
            height: 350px;
            border: 1px solid black;
            float: left;
            overflow: hidden;
            /*display: none;*/
        }
    </style>

　　　　這裏是HTML

<body>
<div id="box">
    <div id="small">
        <img src="small_img.jpg" width="229" height="249" alt=""/>

        <div id="mask"></div>
    </div>
    <div id="big">
        <img src="big_img.JPG" width="549" height="600" alt=""/>
    </div>
</div>

　　　　這裏是js代碼

<script>
    //首先或許要操做的元素
    function getId(tag){
        return document.getElementById(tag)
    }
    var box=getId("box");
    var small=getId("small");
    var mask=getId("mask");
    var big=getId("big");
    var pic=big.children[0];
    console.log(pic);
    //鼠標移動到圖片上出現兩個效果
    small.onmouseover=function(){
        mask.style.display="block";
        big.style.display="block";
    }
    small.onmouseout=function(){
        mask.style.display="none";
        big.style.display="none"
    }
        //設置小圖的焦點框，跟隨鼠標；
    small.onmousemove=function(e){
        var marginL=box.offsetLeft;
        var marginT=box.offsetTop;
        var currentX= e.clientX;
        var currentY= e.clientY;
        var x=currentX-marginL-mask.offsetWidth/2;
        var y=currentY-marginT-mask.offsetHeight/2;

        //給焦點框設置移動區域
        if(x<0){x=0;}
        if(x>small.offsetWidth-mask.offsetWidth){x=small.offsetWidth-mask.offsetWidth};
        if(y<0){y=0;}
        if(y>small.offsetHeight-mask.offsetHeight){y=small.offsetHeight-mask.offsetHeight};
        mask.style.left=x+"px";
        mask.style.top=y+"px";
        //設置大盒子中顯示的內容
        var relativeX=mask.offsetLeft;
        var relativeY=mask.offsetTop;
        var proporationX=pic.offsetWidth/small.offsetWidth;
        var proporationY=pic.offsetHeight/small.offsetWidth;
        pic.style.marginLeft=-relativeX*proporationX+"px";
        pic.style.marginTop=-relativeY*proporationY+"px";
    }
</script>