实例——放大镜
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();