JS面向对象实例—放大镜

实例——放大镜

1、分析：
1.选择元素；
2.绑定事件；
3.进入；
显示元素。
4.移动；
遮罩层跟随鼠标移动的同时计算遮罩层的移动比例；
右侧大图，等比例移动；
5.离开；
隐藏元素。
2、HTML布局

<div class="main">
		<div class="s_box">
	        <img src="img/WaterF10.jpg" alt="">
	        <span></span>
	    </div>
	    <div class="b_box">
	        <img src="img/WaterF10.jpg" alt="">
	    </div>
	    <ul class="list">
	        <li><img src="img/WaterF2.jpg" alt=""></li>
	        <li><img src="img/WaterF3.jpg" alt=""></li>
	    </ul>
	</div>

3、CSS样式
可根据实际情况做调整，以下仅供参考！

.main{
	height: 500px;
	border: 1px solid black;
	position: relative;
}
.s_box{
	width:400px;
	height: 300px;
	position: absolute;
	left: 50px;
	top:10px;
}
.s_box img{
   	width: 400px;
   	height: 300px;
}
.s_box span{
	width: 130px;
	height: 100px;
	background: rgba(200,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:10px;
	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:320px;
}
.list li{
	float: left;
	margin: 0 10px;
}
.list li img{
	width: 100px;
	height: 80px;
}

4、JS行为
①创建class类，并获取元素。
②添加事件原型。
③鼠标进入原型。
④鼠标移动原型。
⑤鼠标离开原型。
⑥保存实例并执行原型。

class Loupe{
	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(){
		// 储存this指向
		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 LG = new Loupe();
LG.addEvent();