本文實(shí)例為大家分享了js實(shí)現(xiàn)簡單放大鏡特效的具體代碼，供大家參考，具體內(nèi)容如下

先來看看效果：

寫放大鏡之前我們先來了解一下定位：

通常子絕父相 （父元素相對(duì)定位，子元素絕對(duì)定位）

元素的定位方式：

1、static 靜態(tài)定位，所有元素，不添加任何定位方式時(shí)的默認(rèn)狀態(tài)

2、relative 相對(duì)定位，不脫離文檔流，可以相對(duì)于自身的原始位置，位移

3、fixed 固定定位，完全脫離文檔流，相對(duì)于瀏覽器的空白區(qū)域來位移， 且不會(huì)因?yàn)闉g覽器的滾動(dòng)而滾動(dòng)

4、absolute 絕對(duì)定位，完全脫離文檔流，相對(duì)于上N級(jí)元素來定位， 如果父級(jí)元素沒有相對(duì)、絕對(duì)或固定定位方式時(shí)，絕對(duì)定位的元素會(huì)向更上層查找。

我們先定位盒子和放大盒子的位置然后隱藏放大盒子

.box { width: 450px; height: 450px; margin: 100px 0 0 100px; border: 1px solid red; position: relative; } /* 右邊大盒子 */ .bigBox{ width: 540px; height: 540px; position: absolute; top: 100px; left: 560px; border: 1px solid #ccc; overflow: hidden; display: none; } .bigBox img { position: absolute; left: 0; top: 0; } /* 覆蓋物 */ .box .mask{ width: 260px; height: 260px; background-color: yellow; /*調(diào)整透明度 */ opacity: .4; position: absolute; left: 0; top: 0; /* 默認(rèn)消失 */ display: none; }

寫js時(shí)我們要注意：

當(dāng)頁面加載完畢后，給box綁定鼠標(biāo)進(jìn)入和移出事件

<script> window.onload = function (){ var box = document.querySelector('.box'); var mask = document.querySelector('.mask'); var bigBox = document.querySelector('.bigBox'); var bigImg = document.querySelector('.bigBox > img'); console.log(bigImg); // 鼠標(biāo)移入 box.onmouseover = function (){ document.querySelector('.mask').style.display = 'block'; document.querySelector('.bigBox').style.display = 'block'; } // 移出 box.onmouseout = function (){ document.querySelector('.mask').style.display = 'none'; document.querySelector('.bigBox').style.display = 'none'; } // 讓覆蓋物跟隨鼠標(biāo)移動(dòng) box.onmousemove = function (){ // 因?yàn)閎ox有100像素的外邊距，我們需要減掉，否則會(huì)錯(cuò)位 var left = event.pageX - 100 - 130; var top = event.pageY - 100 - 130; // 覆蓋物不能超出box范圍，就需要判坐標(biāo)的取值范圍了 // 得到覆蓋物在box中可移動(dòng)的最大距離 var maskMax = this.offsetWidth - mask.offsetWidth; // 判斷l(xiāng)eft if(left <= 0){ left = 0; }else if(left >= maskMax){ left = maskMax; } // top if(top <= 0){ top = 0; }else if(top >= maskMax){ top = maskMax; } // 將設(shè)置好的left，top值設(shè)置給樣式 mask.style.left = left + 'px'; mask.style.top = top + 'px'; mask.style.cursor = 'move';

注意：

①根據(jù)移動(dòng)的比例，設(shè)置大圖的移動(dòng)坐標(biāo)②大圖的移動(dòng)坐標(biāo) = 覆蓋物的偏移量 * 大圖片的最大可移動(dòng)距離 / 覆蓋物的最大可移動(dòng)距離③ ? = 偏移量 *( 圖片的寬度 - bigBox的寬度 ) / maskMax

// 大圖在大盒子中的最大位移距離var bigImgMax = bigImg.offsetWidth - bigBox.offsetWidth;// 大圖片的left值var bigImgX = mask.offsetLeft * bigImgMax / maskMax;// 大圖的top值 var bigImgY = mask.offsetTop * bigImgMax / maskMax; // 覆蓋物與大圖片的移動(dòng)方向是反的，所以這里要給負(fù)值 bigImg.style.left = -bigImgX + 'px'; bigImg.style.top = -bigImgY + 'px'; } }

mark為放大鏡（黃色部分）

<div class='box'> <img src='http://www.gepszalag.com/img/small.jpg' alt=''><div class='mask'></div><div class='bigBox'> <img src='http://www.gepszalag.com/img/big.jpg' alt=''></div>

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。