js实现图片局部等比放大

2019/09/15 23:00
阅读数 9

我们在浏览例如淘宝等网站的时候,经常能见到这样的效果

左边是一张完整的图片,当你的鼠标光标放置在图片上的时候,左边图片会在光标的对应位置产生一个半透明的矩形,在右边会产生一个和左边图片等大的局部放大图。

模拟实现放大镜的效果,今天,我就来说说如何使用js实现这样的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .s_box,.b_box{width:400px;height:300px;position: absolute;top:100px;}
        .s_box{left:50px;}
        .s_box img{width: 400px;height: 300px;}
        .s_box span{position: absolute;left:0;top:0;background: rgba(200,200,200,0.5);display: none}

        .b_box{left:500px;display: none;overflow: hidden}
        .b_box img{width: 1200px;height: 900px;position: absolute;left: 0;top:0;}
    </style>
</head>
<body>
    <div class="s_box">
        <img src="img/img1.jpg" alt="">
        <span></span>
    </div>
    <div class="b_box">
        <img src="img/img1.jpg" alt="">
    </div>
</body>
<script>
    // OOP:编程
    function Magnifier(){
        // 1.选元素
        this.sBox = document.querySelector(".s_box");
        this.span = document.querySelector(".s_box span");
        this.bBox = document.querySelector(".b_box");
        this.bImg = document.querySelector(".b_box img");
        // 2.绑定事件
        this.init()
    }
    Magnifier.prototype.init = function(){
        var that = this;
        // 进入
        this.sBox.onmouseover = function(){
            // 3-1.显示,计算span的宽高
            that.show()
        }
        // 离开
        this.sBox.onmouseout = function(){
            // 3-2.隐藏
            that.hide()
        }
        // 移动
        this.sBox.onmousemove = function(eve){
            var e = eve || window.event;
            // 5.span跟随鼠标
            that.move(e)
        }
    }
    Magnifier.prototype.show = function(){
        // 显示,计算span的宽高
        this.span.style.display = "block";
        this.bBox.style.display = "block";


        this.span.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
        this.span.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
    }
    Magnifier.prototype.hide = function(){
        // 隐藏
        this.span.style.display = "none";
        this.bBox.style.display = "none";
    }
    Magnifier.prototype.move = function(e){
        // 计算移动的距离
        var l = e.clientX - this.sBox.offsetLeft - this.span.offsetWidth/2;
        var t = e.clientY - this.sBox.offsetTop - this.span.offsetHeight/2;

        //  边界限定
        if(l<0) l=0;
        if(t<0) t=0;
        if(l>this.sBox.offsetWidth - this.span.offsetWidth){
            l=this.sBox.offsetWidth - this.span.offsetWidth
        }
        if(t>this.sBox.offsetHeight - this.span.offsetHeight){
            t=this.sBox.offsetHeight - this.span.offsetHeight
        }
        //  span跟随鼠标
        this.span.style.left = l + "px";
        this.span.style.top = t + "px";

        //  计算比例
                // 当前值 / 总值,得到的就是比例
        var x = l / (this.sBox.offsetWidth - this.span.offsetWidth);
        var y = t / (this.sBox.offsetHeight - this.span.offsetHeight);


        //  根据比例计算右边大图应该移动的距离
                                // 比例 * 总值,得到的就是当前应该移动的距离
        this.bImg.style.left = x * (this.bBox.offsetWidth - this.bImg.offsetWidth) + "px";
        this.bImg.style.top = y * (this.bBox.offsetHeight - this.bImg.offsetHeight) + "px";
    }

    new Magnifier();
</script>
</html>

其实这样的效果实现起来是比较简单的,只要我们注意其中比例的配置就基本上没有什么问题了。

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部