原生JS實現放大鏡效果
阿新 • • 發佈：2017-10-18
use 瀏覽器 賦值 uri 字符串 () solid adding clas
效果：
1、 鼠標放上去會有半透明遮罩、右邊會有大圖片局部圖
2、 鼠標移動時右邊的大圖片也會局部移動
放大鏡的關鍵原理：
鼠標在小圖片上移動時，通過捕捉鼠標在小圖片上的位置，定位大圖片的相應位置；
放大鏡的移動方向和大圖片的移動方向：橫向和縱向都是相反，才可以保證同步；
頁面元素：
技術點：事件捕獲，定位
難點：計算
需要元素：小圖片和大圖片，存放小圖片和大圖片的容器，有一個放大鏡；
涉及到的技術點：
（1） 鼠標事件的捕獲：onmouseover（進入）、onmouseout（移除）、onmousemove（移動）
（2） offsetLeft、offsetTop、offsetWidth、offsetHeight、event.clientX、event.clientY
- offsetLeft子元素相對於父元素的左位移
- offsetWidth，offsetHeight一個元素的寬度和高度，寬度和高度是不包括滾動條的。
event.clientX、event.clientY鼠標的X軸和Y軸，相對於整個頁面的坐標，而不是子元素
- offsetLeft和style.left對比：
（1）、style.left返回的是字符串，如30px、offsetLeft返回的是數值30；
（2）、style.left是可讀寫的，offsetLeft是只讀的，所以要改變div的位置，只能修改style.left；
（3）、style.left的值需要事先定義，否則取到的值為空。
style.left只針對在HTML中寫的值有效，樣式表中無法定義style.left;
制作放大鏡所需要的計算
》重點：如何讓小圖片上的放大鏡和大圖片同步移動
關鍵：小圖片的比例和大圖片的比例是一樣的，放大鏡比例和右側大的容器比例是一樣的；他們之間的比例是相同的
移動時的比例計算：
放大鏡核心計算公式：
編碼步驟：
1． 新建html文件；（小圖片和大圖片的容器盛放）
<div id="demo"> <div id="small-box"> <div id="mark"></div> <divid="float-box"></div> <img src="imgs/macbook-small.jpg"/> </div> <div id="big-box"> <img src="imgs/macbook-big.jpg"/> </div> </div>
2． 設置樣式（放大鏡漂浮在小容器裏面，並且具有一定的透明度，大圖片隱藏）
<style>
* {
margin: 0;
padding: 0
}
#demo {
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#small-box {
position: relative;
z-index: 1;
}
#float-box {
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
}
#mark {/*應該是把圖片放在這個上面，它的透明度為0，是個block*/
position: absolute;
display: block;
width: 400px;
height: 255px;
background-color: #fff;
filter: alpha(opacity=0);/*過濾器，目前只有少數瀏覽器支持*/
opacity: 0;
z-index: 10;
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;;
}
#big-box img {
position: absolute;
z-index: 5
}
</style>
3． js邏輯代碼
（1） 先捕獲元素
var objDemo=document.getElementById("demo");
var objSmallBox=document.getElementById("small-box");
var objMarkBox=document.getElementById("mark");
var objFloatBox=document.getElementById("float-box");
var objBigBox=document.getElementById("big-box");
var objBigBoxImg=objBigBox.getElementsByTagName("img")[0];
（2）給小盒子添加事件，移入和移出
移入：浮動的box和和bigBox顯示
objSmallBox.onmouseover=function(){
objFloatBox.style.display="block";
objBigBox.style.display="block";
}
//移除：浮動的box和bigBox隱藏
objSmallBox.onmouseout=function(){
objFloatBox.style.display="none";
objBigBox.style.display="none";
}
（3）添加事件
（2） objSmallBox.onmousemove=function(ev){
var _event=ev;
//1.第一件事，跟隨鼠標的位置來計算放大鏡的位置
//計算值：
var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2;
var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2;
//把值賦值給放大鏡
objFloatBox.style.left=left+"px";
objFloatBox.style.top=top+"px";
}
（4）計算比例
//3計算比例
var percentX=left/(objMarkBox.offsetWidth-objFloatBox.offsetWidth);
var percentY=top/(objMarkBox.offsetHeight-objFloatBox.offsetHeight);
（5）
//4利用這個比例計算距離後賦值給右側的圖片 objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px"; objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px";）
（6）
//5.優化，在前面加判斷,不讓其溢出，加判斷
if(left<0) left=0;
if(top<0) top=0;
if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth)
left=objSmallBox.offsetWidth-objFloatBox.offsetWidth;
if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight)
top=objSmallBox.offsetHeight-objFloatBox.offsetHeight;
完整源代碼：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>放大鏡</title> <style> * { margin: 0; padding: 0 } #demo { display: block; width: 400px; height: 255px; margin: 50px; position: relative; border: 1px solid #ccc; } #small-box { position: relative; z-index: 1; } #float-box { display: none; width: 160px; height: 120px; position: absolute; background: #ffffcc; border: 1px solid #ccc; filter: alpha(opacity=50); opacity: 0.5; } #mark {/*應該是把圖片放在這個上面，它的透明度為0，是個block*/ position: absolute; display: block; width: 400px; height: 255px; background-color: #fff; filter: alpha(opacity=0);/*過濾器，目前只有少數瀏覽器支持*/ opacity: 0; z-index: 10; } #big-box { display: none; position: absolute; top: 0; left: 460px; width: 400px; height: 300px; overflow: hidden; border: 1px solid #ccc; z-index: 1;; } #big-box img { position: absolute; z-index: 5 } </style> <script> //頁面加載完畢後執行 window.onload = function () { //找六個個元素：demo，smallBox,foatBox,mark,bigfloatBox,imgs, var objDemo=document.getElementById("demo"); var objSmallBox=document.getElementById("small-box"); var objMarkBox=document.getElementById("mark"); var objFloatBox=document.getElementById("float-box"); var objBigBox=document.getElementById("big-box"); var objBigBoxImg=objBigBox.getElementsByTagName("img")[0]; //給小盒子添加事件，移入和移出 //移入：浮動的box和和bigBox顯示 objSmallBox.onmouseover=function(){ objFloatBox.style.display="block"; objBigBox.style.display="block"; } //移除：浮動的box和bigBox隱藏 objSmallBox.onmouseout=function(){ objFloatBox.style.display="none"; objBigBox.style.display="none"; } //給小盒子添加鼠標移動事件 objMarkBox.onmousemove=function(ev){ var _event=ev||window.event;//做兼容性，兼容IE //1計算值： var left=_event.clientX-objDemo.offsetLeft-objSmallBox.offsetLeft-objFloatBox.offsetWidth/2; var top=_event.clientY-objDemo.offsetTop-objSmallBox.offsetTop-objFloatBox.offsetHeight/2; //5.優化，在前面加判斷,不讓其溢出，加判斷 if(left<0) left=0; if(top<0) top=0; if(left>objSmallBox.offsetWidth-objFloatBox.offsetWidth) left=objSmallBox.offsetWidth-objFloatBox.offsetWidth; if(top>objSmallBox.offsetHeight-objFloatBox.offsetHeight) top=objSmallBox.offsetHeight-objFloatBox.offsetHeight; //2把值賦值給放大鏡 objFloatBox.style.left=left+"px"; objFloatBox.style.top=top+"px"; //3計算比例 var percentX=left/(objMarkBox.offsetWidth-objFloatBox.offsetWidth); var percentY=top/(objMarkBox.offsetHeight-objFloatBox.offsetHeight); //4利用這個比例計算距離後賦值給右側的圖片 objBigBoxImg.style.left=-percentX*(objBigBoxImg.offsetWidth-objBigBox.offsetWidth)+"px"; objBigBoxImg.style.top=-percentY*(objBigBoxImg.offsetHeight-objBigBox.offsetHeight)+"px"; } } </script> </head> <body> <div id="demo"> <div id="small-box"> <div id="mark"></div> <div id="float-box"></div> <img src="imgs/macbook-small.jpg"/> </div> <div id="big-box"> <img src="imgs/macbook-big.jpg"/> </div> </div> </body> </html>
原生JS實現放大鏡效果