溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了利用原生js編寫一個放大鏡功能，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
1. 查找元素
1.1 查找 main 總分區
1.2 查找 small 盒子
1.3 查找 small 盒子內的 img 小圖片
1.4 查找 mask 遮罩層
1.5 查找 big 盒子
1.6 查找 big 盒子內的 img 大圖片
2. 鼠標移入 main 的時候
2.1 顯示 遮罩盒子
2.2 顯示 大圖分區
3. 鼠標移出 main 的時候
3.1 隱藏 遮罩盒子
3.2 隱藏 大圖分區
4. 鼠標在 main 移動的時候 !!!
4.1 遮罩盒子 跟隨 鼠標移動
4.2 遮罩盒子 在 鼠標中心 處理
4.3 遮罩盒子 在 分區邊界 內移動處理
4.4 大圖片 <反向> <按比例> 跟隨 鼠標移動
注意. 獲取元素偏移值和寬高
1. 獲取 分區 的 水平，垂直偏移值
2. 獲取 分區 的 寬度，高度
3. 獲取 遮罩盒子 的 寬度，高度 (隱藏的盒子無法獲取寬高)
4. 獲取 大圖片 的 寬度，高度 (隱藏的盒子無法獲取寬高)
html代碼:
<body> <!-- 整個大盒子 --> <div class="main" id="main"> <div class="small"> <!--小圖--> <img alt="" class="smallImg" src="../img/iphoneX.jpg" width="350" /> <!-- 遮擋層,黃色的小方塊 --> <div class="mask"></div> </div> <!--大層--> <div class="big"> <!--大圖--> <img alt="" class="bigImg" src="../img/iphoneX.jpg" width="800" /> </div> </div> </body>
css代碼:
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0px;
left: 0px;
/* 把鼠標指針換成移動圖標 */
cursor: move;
display: none;
}
.small {
position: relative;
height: 350px;
width: 350px;
}
.active .mask,
.active .big {
display: block;
}
.big img {
/* 相對定位：相對自己原本的位置定位，原來的位置保留的 */
position: absolute;
}
</style>javascript代碼:
<script>
//查找元素
var main = document.querySelector(".main");
var small = document.querySelector(".small"); //左邊小盒子
var smallImg = document.querySelector(".smallImg");
var mask = document.querySelector(".mask"); //黃色遮罩層
var big = document.querySelector(".big");//右邊小盒子
var bigImg = document.querySelector(".big .bigImg");
//2. 鼠標移入 main 的時候
//2.1 顯示 遮罩盒子
// 2.2 顯示 大圖分區
main.onmouseenter=function () {
mask.style.display="block";
big.style.display="block";
};
main.onmouseleave=function () {
mask.style.display="none";
big.style.display="none";
};
// 4. 鼠標在 main 移動的時候 !!!
// 4.1 遮罩盒子 跟隨 鼠標移動
// 4.2 遮罩盒子 在 鼠標中心 處理
// 4.3 遮罩盒子 在 分區邊界 內移動處理
// 4.4 大圖片 <反向> <按比例> 跟隨 鼠標移動
small.onmousemove=function (e) {
var x=e.pageX-100-(175/2); //盒子的寬高為300px，因為鼠標默認在左上角。因為需要向左移動自身一半
var y=e.pageY-100-(175/2); 盒子的寬高為300px，因為鼠標默認在左上角。因為需要向下移動自身一半
if(x<0) x=0; //規定遮罩層移動范圍。如果遮罩層超出了小盒子邊框，x就重置為0.
if(y<0) y=0; // //規定遮罩層移動范圍。如果遮罩層超出了小盒子邊框，y就重置為0.
if(x>175) x=175; //遮罩層本身的寬高為175
if(y>175) y=175;
mask.style.top=(y)+"px";
mask.style.left=(x)+"px";
bigImg.style.top=(-y*(800/350))+"px"; //右邊放大效果，以800：350顯示
bigImg.style.left=(-x*(800/350))+"px"; //在xy前面加-號是因為需要反向顯示
}
</script>上述內容就是利用原生js編寫一個放大鏡功能，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
