使用JavaScript編寫一個(gè)放大鏡特效

這篇文章給大家介紹使用JavaScript編寫一個(gè)放大鏡特效，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

JavaScript的特點(diǎn)

1.JavaScript主要用來向HTML頁面添加交互行為。 2.JavaScript可以直接嵌入到HTML頁面，但寫成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離。 3.JavaScript具有跨平臺(tái)特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺(tái)下運(yùn)行。

元素的定位方式：

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="../img/small.jpg" alt="">
<div class="mask">
</div>
<div class="bigBox">
 <img src="../img/big.jpg" alt="">
</div>

關(guān)于使用JavaScript編寫一個(gè)放大鏡特效就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。