用javascript實現放大鏡效果
我們經常在一些詳情頁上可以見到放大鏡效果，今天我們也來做一個放大鏡樣式。
先來看一下效果:
圖中的圖片選的不是很好,有些糊瞭,各位可以重新選擇圖片進行做放大鏡案例
這個案例可以分為三個功能模塊
1.鼠標經過小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開隱藏2個盒子功能
2.黃色的遮擋層跟隨鼠標功能。
3.移動黃色遮擋層，大圖片跟隨移動功能。
這是我們的html主體部分:
<div class="product_intro clearfix"> <!-- 預覽區域 --> <div class="preview_wrap fl"> <div class="preview_img"> <img src="img/big5.jpg" class="smallImg"> <div class="mask"> </div> <div class="big"> <img src="img/big5.jpg" class="bigImg"> </div> </div> </div> </div>
接下來是css樣式部分，這裡要註意放大鏡部分大圖和小圖部分的隱藏雨顯示以及定位問題
.preview_wrap {
width: 400px;
height: 590px;
}
.preview_img {
position: relative;
height: 398px;
border: 1px solid #CCCCCC;
background-color: pink;text-align: center;
}
.preview_img .smallImg {
margin-top: 25%;
width: 200px;
}
.mask {
display: none;
position: absolute;
top: left: 0;
width: 300px;
height: 300px;
background-color: yellow;
opacity: .5;
border: 1px solid #CCCCCC;
cursor: move;
}
.big {
display: none;
position: absolute;
left: 410px;
top: 0;
width: 500px;
height: 500px;
z-index: 999;
border: 1px solid #ccc;
overflow: hidden;
}
.big img {
position: absolute;
top: 0;
left: 0;
}
最後來看javascript部分:
如果重新連接一個javascript頁面的話要記得寫好<script src="" type="text/javascript" ></script>
並且要加上window.addEventListener('load', function() {},它的作用是當頁面全部加載執行完畢後再執行js代碼
接下來是代碼步驟及思路,並且在js代碼裡也會標註好
1.鼠標經過小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開隱藏2個盒子功能,就是顯示與隱藏
2.鼠標移動的時候,讓黃色的盒子跟著鼠標來走
3.把鼠標坐標給遮擋層不合適。因為遮當層坐標以父盒子為準。
4.首先是獲得鼠標在盒子的坐標
5.之後把數值給遮擋層做為left和top值。盒子高度 300的一半 150
6.此時用到鼠標移動事件，但是還是在小圖片盒子內移動。mask移動的距離
7.遮擋層不能超出小圖片盒子范圍
8.大圖片的移動距離=遮擋層移動距離*大圖片最大移動距離/遮擋層的最大移動距離
// 整個案例可以分為三個功能模塊
// 鼠標經過小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開隱藏2個盒子功能
// 黃色的遮擋層跟隨鼠標功能。
// 移動黃色遮擋層，大圖片跟隨移動功能。
// 1.鼠標經過小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開隱藏2個盒子功能
// 就是顯示與隱藏
// 當頁面全部加載執行完畢後再執行js代碼
window.addEventListener('load', function() {
var preview_img = document.querySelector('.preview_img');
var mask = document.querySelector('.mask');
var big = document.querySelector('.big');
//2.當我們鼠標經過 preview_img 就顯示和隱藏mask遮擋層和 big 大盒子
preview_img.addEventListener('mouseover', function() {
mask.style.display = 'block';
big.style.display = 'block';
})
preview_img.addEventListener('mouseout', function() {
mask.style.display = 'none';
big.style.display = 'none';
})
// 黃色的遮擋層跟隨鼠標功能。
// 把鼠標坐標給遮擋層不合適。因為遮當層坐標以父盒子為準。
// 首先是獲得鼠標在盒子的坐標
// 之後把數值給遮擋層做為left和top值。
// 此時用到鼠標移動事件，但是還是在小圖片盒子內移動。
// 2.鼠標移動的時候,讓黃色的盒子跟著鼠標來走
preview_img.addEventListener('mousemove', function(e) {
//(1).先計算出鼠標在盒子裡的坐標
// 先算出鼠標在頁面中的坐標,減去盒子距離左側的距離,就是鼠標在盒子裡的坐標
// 但是這裡要註意:
// 要看他有沒有父元素,並且父元素有沒有定位
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
// console.log(x,y)
//(2)盒子高度 300的一半 150
// (3)mask移動的距離
var maskX = x - mask.offsetWidth / 2;
var maskY = y - mask.offsetHeight / 2;
// (4)遮擋層不能超出小圖片盒子范圍
// 如果小於0,就把坐標設置為0
//遮擋層的最大一定距離,因為都是正方形,所以高也適用
var maskMax = preview_img.offsetWidth - mask.offsetWidth;
if (maskX <= 0) {
maskX = 0
//如果大於遮擋層最大的移動距離，就把坐標設置為最大的移動距離
//遮擋層的最大移動距離:小圖片盒子寬度減去遮擋層盒子寬度
} else if (maskX >= maskMax) {
maskX = maskMax;
}
if (maskY <= 0) {
maskY = 0;
//如果大於遮擋層最大的移動距離，就把坐標設置為最大的移動距離
//遮擋層的最大移動距離:小圖片盒子寬度減去遮擋層盒子寬度
} else if (maskY >= maskMax) {
maskY = maskMax;
}
mask.style.left = maskX + 'px';
mask.style.top = maskY + 'px';
// 移動黃色遮擋層, 大圖片跟隨移動功能
// 求大圖片的移動距離公式:
// 遮擋層移動距離 / 遮擋層最大移動距離 = 大圖片移動距離 / 大圖片最大移動距離
// 3.大圖片的移動距離=遮擋層移動距離*大圖片最大移動距離/遮擋層的最大移動距離
var bigImg = document.querySelector('.bigImg'); //大圖
//大圖片最大移動距離
var bigMax = bigImg.offsetWidth - big.offsetWidth;
//大圖片最大移動距離
var bigX = maskX * bigMax / maskMax;
var bigY = maskY * bigMax / maskMax;
bigImg.style.left = -bigX + 'px';
bigImg.style.top = -bigY + 'px';
})
})
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。