放大鏡

放大鏡

1.理解什麼是放大鏡？
當鼠標移動到圖片上時，會把該區域圖片放大，讓用戶更清晰看見。
2.思路
設置一個大的div模塊zoom，裏面包含兩個小div模塊（用來放兩張圖片，一個是原始圖，一個是鼠標移動所放大的局部圖）。

 

先對主體body進行搭建
html代碼：

 

css部分樣式代碼：

 

瀏覽器運行效果以下：

 

補充：對上述css代碼進行補充，去掉我所註釋代碼，把big（div）模塊多餘隱藏。
效果以下:

 

接下來咱們須要寫一個原生JS代碼，需知足的功能有
1.當鼠標移動到small塊時，紅色的遮擋層出現，同時big塊出現。
2.當鼠標移除small塊時，紅色的遮擋層消失，同時big塊消失。
3.當鼠標移動時，紅色遮擋層跟隨鼠標移動，同時big塊裏大圖跟隨移動。
敲重點！！！！這裏需注意幾個思想
a）小圖/大圖=遮擋層/大圖顯示區（big塊）
遮擋層=大顯示區*（小圖/大圖）
b)遮擋層的移動範圍=small（div塊）的寬/高-遮擋層的寬/高
大圖的移動範圍=大圖的寬/高-big（塊的寬高）

 

上圖代碼以下，0.5是由於鼠標在遮擋層的中間

 

//獲取鼠標位置（賦值給遮罩層的）
var x=event.clientX-small.offsetLeft-span.offsetWidth*0.5;
var y=event.clientY-small.offsetTop-span.offsetHeight*0.5;
　

好難寫，直接看代碼分析吧

//獲取元素
var span=document.querySelector(".mark");//獲取遮擋層
var small=document.querySelector(".one");//獲取左邊第一個盒子
var big=document.querySelector(".two");//第二個盒子
var pic=big.querySelector(".two .pic");`//大盒子裏面的原圖，由於後面要對它進行設置

 

//鼠標移入
small.onmouseover=function(){
//當鼠標移入時，span和big出現，由於css裏面設置的是display：none
span.style.display="block";
big.style.display="block";
}

　　

.zoom .one .mark{
position: absolute;
width: 50px;
height: 50px;
top: 0;
left: 0;
background: silver;
/*//透明度 兼容*/
opacity: .5;
display: none;
}

　　

.zoom .two{
width: 200px;
height: 200px;
background-color: darkblue;
overflow: hidden;
position: relative;
/*left: 500px;*/
float: right;
display: none;
}

　

//鼠標移除，遮擋層和big塊消失
//鼠標移動移出
small.onmouseout=function(){
span.style.display="none";
big.style.display="none";
}

　　

重點來了，好好看，我有註釋！

//鼠標移動
small.onmousemove=function(event){
//設置瀏覽器兼容
var event=event||window.event;

　　

//獲取鼠標位置（賦值給遮罩層的）
var x=event.clientX-small.offsetLeft-span.offsetWidth*0.5;
var y=event.clientY-small.offsetTop-span.offsetHeight*0.5;

　　

//設置邊界
//由於遮擋層只能在small裏面移動，因此給個邊界限定
if(x<0){
x=0
}
if(x>(small.offsetWidth-span.offsetWidth)){
x=(small.offsetWidth-span.offsetWidth);
}
if(y<0){
y=0
}
if(y>(small.offsetHeight-span.offsetHeight)){
y=(small.offsetHeight-span.offsetHeight);
}

　　

//把鼠標位置給遮罩層
//把鼠標獲取的位置賦值給遮擋層，
span.style.left=x+"px";
span.style.top=y+"px";

　　

//比例計算
//x，y是在變化的 算出它與可移動範圍的比值，同等大圖也是該比例係數移動的
var w=x/(small.offsetWidth-span.offsetWidth);
var h=y/(small.offsetHeight-span.offsetHeight);

　　

//大圖能夠移動的位置
pic.style.left=w*(big.offsetWidth-pic.offsetWidth)+"px";
pic.style.top=h*(big.offsetHeight-pic.offsetHeight)+"px";
}

　　

最終效果以下：

 

看不懂請給我留言，如無緊急狀況，每晚都會解答。

或者關注CSDN 博客：前端小小小怪

看到都會解答，一塊兒學習。