js实现图片局部等比放大

Posted bsys

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现图片局部等比放大相关的知识,希望对你有一定的参考价值。

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

技术图片

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

模拟实现放大镜的效果,今天,我就来说说如何使用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_boxwidth:400px;height:300px;position: absolute;top:100px;
        .s_boxleft:50px;
        .s_box imgwidth: 400px;height: 300px;
        .s_box spanposition: absolute;left:0;top:0;background: rgba(200,200,200,0.5);display: none

        .b_boxleft:500px;display: none;overflow: hidden
        .b_box imgwidth: 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>

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

 

以上是关于js实现图片局部等比放大的主要内容,如果未能解决你的问题,请参考以下文章

原生JS实现放大镜效果

css+jquery 实现图片局部放大预览

canvas图片压缩,局部放大,像素处理

放大镜 鼠标滑入 鼠标滑轮放大

vue3使用useMouseInElement实现图片局部放大预览效果

python+opencv: 论文插图局部放大并拼接