js實現簡單放大鏡效果
阿新 • • 發佈：2020-03-09
用js實現簡單放大鏡效果，供大家參考，具體內容如下
此處放大鏡實現的效果就是當滑鼠放置在圖片上會有半透明遮罩，圖片的一個區域就會被放大，然後展示在右邊。當滑鼠移動時右邊的大圖片也會區域性移動。這裡的放大並不是真正的放大，而是等比例移動。下面是實現的程式碼：
css樣式程式碼如下：
<style>
.s_box{width:400px;height: 300px;position: absolute;left: 50px;top:100px;}
.s_box img{width: 400px;height: 300px;}
.s_box span{width: 130px;height: 100px;background: rgba(200,200,0.5);position: absolute;left:0;top:0;display: none;cursor:move;}
.b_box{width: 400px;height: 300px;overflow: hidden;position: absolute;left:500px;top:100px;display: none;}
.b_box img{width: 1200px;height: 900px;position: absolute;left:0;top:0;}
.list{margin: 0;padding: 0;list-style: none;position: absolute;left:50px;top:430px;}
.list li{float: left;margin: 0 10px;}
.list li img{width: 100px;height: 80px;}
</style>html程式碼如下：
<body> <div class="s_box"> <img src="../img/large1.jpg" alt="js實現簡單放大鏡效果"> <span></span> </div> <div class="b_box"> <img src="../img/large1.jpg" alt="js實現簡單放大鏡效果"> </div> <ul class="list"> <li><img src="../img/large1.jpg" alt="js實現簡單放大鏡效果"></li> <li><img src="../img/large2.jpg" alt="js實現簡單放大鏡效果"></li> </ul> </body>
js主要程式碼如下：
// 分析:
// 1.選擇元素
// 2.繫結事件
// 3.進入的時候顯示元素
// 4.移動：遮罩層跟隨滑鼠移動的同時計算遮罩層的移動比例 、右側大圖，等比例移動
// 5.離開的時候隱藏元素
<script>
class Large{
constructor(){
this.sBox = document.querySelector(".s_box");
this.sImg = document.querySelector(".s_box img");
this.sSpan = document.querySelector(".s_box span");
this.bBox = document.querySelector(".b_box");
this.bImg = document.querySelector(".b_box img");
// 點選小圖切換大圖的按鈕
this.li = document.querySelectorAll(".list li");
}
addEvent(){
var that = this;
this.sBox.onmouseover = function(){
that.over();
}
this.sBox.onmousemove = function(eve){
var e = eve || window.event;
that.move(e);
}
this.sBox.onmouseout = function(){
that.out();
}
// 切換圖片按鈕的點選事件：根據佈局做出調整
for(var i=0;i<this.li.length;i++){
this.li[i].onclick = function(){
that.sImg.src = this.children[0].src;
that.bImg.src = this.children[0].src;
}
}
}
over(){
this.sSpan.style.display = "block";
this.bBox.style.display = "block";
}
move(e){
// 計算遮罩層跟隨滑鼠移動時的left和top
var l = e.pageX - this.sBox.offsetLeft - this.sSpan.offsetWidth/2;
var t = e.pageY - this.sBox.offsetTop - this.sSpan.offsetHeight/2;
// 邊界限定
if(l<0) l=0;
if(t<0) t=0;
if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
}
if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
}
// 設定遮罩層的位置
this.sSpan.style.left = l + "px";
this.sSpan.style.top = t + "px";
// 根據遮罩層移動的距離計算比例
var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
// 根據上一步得到的比例，計算右側大圖要移動的當前值
this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
}
out(){
this.sSpan.style.display = "none";
this.bBox.style.display = "none";
}
}
// 啟動
var l = new Large();
l.addEvent();
</script>實現效果：
更多關於放大鏡的精彩文章，請點選連結檢視： 《放大鏡效果》
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。