放大镜效果的实现js

最新推荐文章于 2024-10-01 20:12:28 发布

xinhanhan1

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量102

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/xinhanhan1/article/details/104645692

版权

<div id="box1">
    <img src="../day17/img/WaterF6.jpg" alt="">
    <span></span>
</div>
<div id ="box2">
    <img src="../day17/img/WaterF6.jpg" alt=""></div>
<ul>
    <li><img src="../day17/img/WaterF6.jpg" alt=""></li>
    <li><img src="../day17/img/WaterF5.jpg" alt=""></li>
</ul>


class big{
// 选择元素
constructor(){
    this.Box1 = document.getElementById("box1");
    this.img1 = document.querySelector("#box1 img");
    this.span1 = document.querySelector("#box1 span");
    this.Box2 = document.getElementById("box2");
    this.img2 = document.querySelector("#box2 img");
    this.li = document.querySelectorAll("ul li");
}
// 绑定事件
shijian(){
    var that =this;
    // 鼠标进入  显示元素
    this.Box1.onmouseover =function(){
        that.over();
    }
    // 鼠标移动
    this.Box1.onmousemove =function(eve){
        var e = eve || window.event;
        that.move(e);
    }
    // 鼠标离开 隐藏元素
    this.Box1.onmouseout =function(){
        that.out();
    }
    // 切换图片的点击事件
    for (let i = 0; i < this.li.length; i++) {
        this.li[i].onclick =function(){
            that.img1.src = this.children[0].src;
            that.img2.src = this.children[0].src;
        }
        
    }
}
// 事件方法
// 鼠标进入方法
over(){
  this.span1.style.display = "block";
  this.Box2.style.display = "block";
}
// 鼠标移动方法
move(e){
    var l = e.pageX - this.Box1.offsetLeft-this.span1.offsetWidth/2;
    var t = e.pageY - this.Box1.offsetTop-this.span1.offsetHeight/2;
    if (l<0) l = 0;
    if(t<0)  t = 0;
    if(l>this.Box1.offsetWidth -this.span1.offsetWidth){
        l = this.Box1.offsetWidth -this.span1.offsetWidth;
    }
    if(t>this.Box1.offsetHeight-this.span1.offsetHeight){
        t = this.Box1.offsetHeight-this.span1.offsetHeight;
    }
    // 遮罩层移动
    this.span1.style.left = l + "px";
    this.span1.style.top = t + "px";
    // 计算比例
    var x= l/(this.Box1.offsetWidth -this.span1.offsetWidth);
    var y= t/(this.Box1.offsetHeight-this.span1.offsetHeight);
    // 右侧大图等比例移动
    this.img2.style.left = (this.Box2.offsetWidth - this.img2.offsetWidth) * x + "px";
    this.img2.style.top = (this.Box2.offsetHeight - this.img2.offsetHeight) * y + "px";

}
// 鼠标离开方法
out(){
    this.span1.style.display = "none";
  this.Box2.style.display = "none";
}

}
// 运行
var b =new big();
b.shijian();