逆战班-----javascript实现放大镜效果

最新推荐文章于 2020-03-25 21:08:01 发布

m0_46381538

最新推荐文章于 2020-03-25 21:08:01 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/m0_46381538/article/details/104642721

版权

CSS部分代码

    *.a_box{width:300px;height: 300px;position: absolute;left: 50px;top:50px;border: #000000 solid 1px;}
    .a_box img{width: 300px;height: 300px;display: block;align-content: center;align-items: center;}
    .a_box span{width: 100px;height: 100px;background-color: yellow;position: absolute;left:0;top:0;display: none;cursor:move;opacity: 0.3;}
    .b_box{width: 300px;height: 300px;overflow: hidden;position: absolute;left:500px;top:100px;display: none;}
    .b_box img{width: 1000px;height: 1000px;position: absolute;left:0;top:0;}
    .list{margin: 0;padding: 0;list-style: none;position: absolute;left:50px;top:400px;}
    .list li{float: left;margin: 0 10px;}
    .list li img{width: 100px;height: 100px;border: #000000 solid 1px;}*

body部分代码

*<div class="a_box">
    <img src="https://img11.360buyimg.com/cms/jfs/t1/99710/26/1538/76543/5dc006eaE25719e6b/0fd323d246a3e5db.png!q95.webp" alt="">
    <span></span>
</div>
<div class="b_box">
    <img src="https://img11.360buyimg.com/cms/jfs/t1/47398/31/16500/49779/5dda74d1E2918104f/6d256adc3e1a54f4.png!q95.webp" alt="">
</div>
<ul class="list">
    <li><img src="https://img11.360buyimg.com/cms/jfs/t1/99710/26/1538/76543/5dc006eaE25719e6b/0fd323d246a3e5db.png!q95.webp" alt=""></li>
    <li><img src="https://img11.360buyimg.com/cms/jfs/t1/47398/31/16500/49779/5dda74d1E2918104f/6d256adc3e1a54f4.png!q95.webp" alt=""></li>
</ul>*

js部分代码

*class Large{
    constructor(){
        this.aBox = document.querySelector(".a_box");
        this.aImg = document.querySelector(".a_box img");
        this.aSpan = document.querySelector(".a_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.aBox.onmouseover = function(){
            that.over();
        }
        this.aBox.onmousemove = function(eve){
            var e = eve || window.event;
            that.move(e);
        }
        this.aBox.onmouseout = function(){
            that.out();
        }
        for(var i=0;i<this.li.length;i++){
            this.li[i].onclick = function(){
                that.aImg.src = this.children[0].src;
                that.bImg.src = this.children[0].src;
            }
        }
    }
    over(){
        this.aSpan.style.display = "block";
        this.bBox.style.display = "block";
    }
    move(e){
        var w = e.pageX - this.aBox.offsetLeft - this.aSpan.offsetWidth/2;
        var h = e.pageY - this.aBox.offsetTop - this.aSpan.offsetHeight/2;
        if(w<0) l=0;
        if(h<0) t=0;
        if(w > this.aBox.offsetWidth - this.aSpan.offsetWidth){
            w = this.aBox.offsetWidth - this.aSpan.offsetWidth;
        }
        if(h > this.aBox.offsetHeight - this.aSpan.offsetHeight){
            h = this.aBox.offsetHeight - this.aSpan.offsetHeight;
        }
        this.aSpan.style.left = w + "px";
        this.aSpan.style.top = h + "px";
        var x = w / (this.aBox.offsetWidth - this.aSpan.offsetWidth);
        var y = h / (this.aBox.offsetHeight - this.aSpan.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.aSpan.style.display = "none";
        this.bBox.style.display = "none";
    }
}
var w = new Large();
w.addEvent();*

效果图

在这里插入图片描述