原生JavaScript實例之簡單放大鏡

放大鏡效果分析：

一、選項卡效果

鼠標移入小圖列表其中一張圖時，小圖邊框效果，大盒出現對應的大圖

二、放大鏡效果

鼠標移入大圖時，鼠標位置出現放大鏡，鼠標在放大鏡中心位置，大盒右邊出現細節大圖

三、範圍效果

1、放大鏡活動範圍在大盒內

2、當鼠標離開大盒，放大鏡和細節圖消失

四、圖片比例

放大鏡框：大盒：細節圖 = 1:2:4

HTML結構

<!-- 大圖 -->
<div id="box">
　　<!--默認顯示的大圖片-->
　　<img src="imgs/1-large.jpg"
 
 class="middle" width="400" height="400">
　　<!-- 放大鏡 -->
　　<div id="filter"></div>
</div>
<!-- 細節圖 -->
<div id="max">
　　<img src="imgs/1-large.jpg" id="maxImg">
</div>
<!-- 小圖列表 -->
<div>
　　<img src="imgs/1-small.jpg" class="small" data-url="imgs/1-large.jpg"
 
>
　　<img src="imgs/2-small.jpg" class="small" data-url="imgs/2-large.jpg">
　　<img src="imgs/3-small.jpg" class="small" data-url="imgs/3-large.jpg">
　　<img src="imgs/4-small.jpg" class="small" data-url="imgs/4-large.jpg">
　　<img src="imgs/5-small.jpg" class="small" data-url="imgs/5-large.jpg"
 
>
</div>

　CSS樣式

.small {
    margin: 0 10px;
    border: 1px solid #fff;
}
.small:hover {
    border-color: #000;
}
/*放大鏡定位，初始隱藏*/
#filter{
    width: 200px;
    height: 200px;
    position: absolute;
    background: #000;
    opacity: 0.5;
    left: 0;
    top: 0;
    display: none;
}
/*大盒添加相對定位*/
#box{position: relative;width: 400px}
/*細節圖設置位置及絕對定位，初始隱藏*/
#max{position: absolute;left:430px;top:0;overflow: hidden;width:400px;height: 400px;}
#maxImg{width:800px;height: 800px;position: absolute; display: none;}

js

//獲取所有的小圖
var oSmall = document.querySelectorAll(".small");
//獲取大盒的圖片
var omiddle = document.querySelector(".middle");
//獲取細節圖
var omaxImg = document.getElementById("maxImg");
//獲取放大鏡
var oFilter = document.getElementById("filter");
//獲取大盒
var oBox = document.getElementById("box");
//選項卡效果

//先給每個小圖添加鼠標事件
for(var i=0;i<oSmall.length;i++){
//當移入當前小圖時
　　oSmall[i].onmouseover = function() {
　　　　//獲取當前小圖的自定義屬性
　　　　var src = this.getAttribute("data-url"); 
　　　　//將獲取到的src賦值給大圖跟細節圖
　　　　omiddle.src = src;
　　omaxImg.src = src;
　　}
}


//放大鏡效果
//當鼠標移入大盒子時，放大鏡跟細節圖顯示
oBox.onmouseover = function(){
oFilter.style.display = "block";
omaxImg.style.display = "block";　　

this.onmousemove = function(e){
var e = e||event;
//鼠標位置
var l = e.clientX - oBox.offsetLeft - oFilter.offsetWidth/2;
var t = e.clientY - oBox.offsetTop - oFilter.offsetHeight/2;
//放大鏡在盒子裏的判斷條件（三目判斷）
l = l>oBox.offsetWidth - oFilter.offsetWidth?oBox.offsetWidth - oFilter.offsetWidth:(l<0?0:l);

t = t>oBox.offsetHeight - oFilter.offsetHeight?oBox.offsetHeight - oFilter.offsetHeight:(t<0?0:t);


//if判斷的方法
/*if(l>oBox.offsetWidth - oFilter.offsetWidth){
l = oBox.offsetWidth - oFilter.offsetWidth
}

if(t>oBox.offsetHeight - oFilter.offsetHeight){
t = oBox.offsetHeight - oFilter.offsetHeight
}

if(l<0){
l = 0;
}

if(t<0){
t = 0;
}*/
//賦值放大鏡的位置 

oFilter.style.left = l+‘px‘;
oFilter.style.top = t+‘px‘;

//賦值細節圖的位置

omaxImg.style.left = -2*l+‘px‘;
omaxImg.style.top = -2*t+‘px‘;

}

}

//鼠標移出大盒後，放大鏡、細節圖隱藏

oBox.onmouseout = function(e){
oFilter.style.display = "none";
omaxImg.style.display = "none";
}

原生JavaScript實例之簡單放大鏡