購物網站的產品頁經常會放有一個產品展示圖區。該圖區有一個功能就是產品圖的放大功能，移動左側的焦點區域，可以放大細節部分觀看，詳情如下圖。實現該功能的方法也非常簡單。
實驗：制作產品焦點放大圖。
所需技能：
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。