購物網站的產品頁經常會放有一個產品展示圖區。該圖區有一個功能就是產品圖的放大功能，移動左側的焦點區域，可以放大細節部分觀看，詳情如下圖。實現該功能的方法也非常簡單。
實驗：制作產品焦點放大圖。
所需技能：
1、基本的獲取頁面元素的方法；
2、幾個簡單的事件；
3、會使用dom設置元素的屬性；
案例原理：
1、焦點框的跟隨鼠標事件；
2、焦點框的移動區域規定；
3、大盒子內容的顯示；
適合對象：js初學者
-------------------------------------------------------------------開始！-------------------------------------------------------------
一、首先我們準備CSS樣式，CSS樣式中需要注意的幾個點是：
（1）焦點圖相對定位，默認display：none；
（2）右側顯示大圖的盒子（以下簡稱大圖框）默認display：none；大圖框中的內容在溢出盒子后要隱藏overflow：hidden；
二、開始書寫script代碼：
（1）首先獲取頁面元素：
//首先或許要操作的元素 function getId(tag){ //定義一個用id獲取元素的方法，減少很多工作量！ 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]; //這里是通過節點的方法獲取元素（2）明確鼠標移動到小圖上會出現兩個事件：1）焦點框要出來；2）大圖框要顯示出來。同理鼠標移除后這兩個事假要取消
//鼠標移動到圖片上出現兩個效果 small.onmouseover=function(){ mask.style.display="block"; big.style.display="block"; } small.onmouseout=function(){ mask.style.display="none"; big.style.display="none" } （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變化超過容許值時，給他一個固定的值；
//設置小圖的焦點框，跟隨鼠標； 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}; // 用于定位的x的最小值是0，最大值是small的長度-mask的長度 y軸線同理 if(y<0){y=0;} if(y>small.offsetHeight-mask.offsetHeight) {y=small.offsetHeight-mask.offsetHeight}; mask.style.left=x+"px"; //注意在規定移動區域后再寫mask的移動區域，注意代碼的執行順序 mask.style.top=y+"px";（5）設置大圖的顯示
1）在big盒子中實現圖片的移動，應該想到-margin值；
2）移動多少距離可以利用一個固定比例乘以mask的left和top值，想一下焦點區的左上角和大圖框的左上角顯示的位置是相同的?。。∵@一點就不是很難理解了
//設置大盒子中顯示的內容 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"; //注意！margin的值必須是負值，“px不要丟掉 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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
