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

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

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

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

　　　　　　　2、幾個簡單的事件；

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

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

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

　　　　　　　3、大盒子內容的顯示；

　　適合對象：js初學者

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

　　一、首先我們準備CSS樣式，CSS樣式中需要註意的幾個點是：

（1）焦點圖相對定位，預設display：none；

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

　二、開始書寫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>