首頁 > 開發者 > JavaScript
js編寫一個簡單的產品放大效果代碼，js編寫放大代碼
購物網站的產品頁經常會放有一個產品展示圖區。該圖區有一個功能就是產品圖的放大功能，移動左側的焦點地區，可以放大細節部分觀看，詳情如。實現該功能的方法也非常簡單。
實驗：製作產品焦點放大圖。
所需技能：
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>
以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
