基于jquery实现滚轮放大缩小图片的函数代码

Tricia ·

更新时间:2024-09-20

· 1920 次阅读

以下是一份基本的jquery实现滚轮放大缩小图片的函数代码

（1）滚轮控制放大缩小图片效果如图：

实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="../static/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    $(function() {
        function zoomImg(o) {
            var zoom = parseInt(o.style.zoom, 10) || 100;
            zoom += event.wheelDelta / 12; //可适合修改
            if (zoom > 0) o.style.zoom = zoom + '%';
        }
        $(document).ready(function() {
            $("img").bind("mousewheel",
                function() {
                    zoomImg(this);
                    return false;
                });
        });
    })
    </script>
</head>
<body>
   <center>
        <img src="../static/img/111.jpg" border="1px" />
    </center>
</body>
</html>

（2）点击图片，弹出遮罩层，再用滚轮控制图片缩放，该场景一般用于聊天对话框。

实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="../static/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
    <style>
        /*************图片预览************/
        #outerdiv {
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 2;
            width: 100%;
            height: 100%;
            display: none;
        }
        #innerdiv {
            position: absolute;
        }
        #bigimg {
            border: 5px solid #fff;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
    $(function() {
        function zoomImg(o) {
            var zoom = parseInt(o.style.zoom, 10) || 100;
            zoom += event.wheelDelta / 12; //可适合修改
            if (zoom > 0) o.style.zoom = zoom + '%';
        }
        $(document).ready(function() {
            $("img").bind("mousewheel",
                function() {
                    zoomImg(this);
                    return false;
                });
        });
    })
    </script>
</head>
<body>
    <center>
        <img id="img" src="../static/img/111.jpg" border="1px" @click="bigimg()" />
    </center>
    <div id="outerdiv">
        <div id="innerdiv">
            <img id="bigimg" src="" onmousewheel="bigimg(this)" />
        </div>
    </div>
    <script>
    $(`#img`).click(function() {
        var _this = $(this); //将当前的img元素作为_this传入函数
        imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
    })
    // 图片缩放
    function bigimg(obj) {
        // alert(parseInt(obj.style.zoom, 10));
        //obj是一个对象，初始时obj并没有zoom属性，所以给zoom赋值为100；
        var zoom = parseInt(obj.style.zoom, 10) || 100;
        //每次滚动鼠标时，改变zoom的大小
        //event.wheelDelta有两个值，120，-120，取值情况取决于滚动鼠标的方向；
        zoom += event.wheelDelta / 12; //每次滚动加减10
        if (zoom > 0)
            obj.style.zoom = zoom + '%'; //更改后的zoom赋值给obj
        return false;
    }
    // 预览图片
    function imgShow(outerdiv, innerdiv, bigimg, _this) {
        var src = _this.attr("src"); //获取当前点击的pimg元素中的src属性
        $(bigimg).attr("src", src); //设置#bigimg元素的src属性
        /*获取当前点击图片的真实大小，并显示弹出层及大图*/
        $("<img />").attr("src", src).load(function() {
            var windowW = $(window).width(); //获取当前窗口宽度
            var windowH = $(window).height(); //获取当前窗口高度
            var realWidth = this.width; //获取图片真实宽度
            var realHeight = this.height; //获取图片真实高度
            var imgWidth, imgHeight;
            var scale = 0.8; //缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放
            if (realHeight > windowH * scale) { //判断图片高度
                imgHeight = windowH * scale; //如大于窗口高度，图片高度进行缩放
                imgWidth = imgHeight / realHeight * realWidth; //等比例缩放宽度
                if (imgWidth > windowW * scale) { //如宽度扔大于窗口宽度
                    imgWidth = windowW * scale; //再对宽度进行缩放
                }
            } else if (realWidth > windowW * scale) { //如图片高度合适，判断图片宽度
                imgWidth = windowW * scale; //如大于窗口宽度，图片宽度进行缩放
                imgHeight = imgWidth / realWidth * realHeight; //等比例缩放高度
            } else { //如果图片真实高度和宽度都符合要求，高宽不变
                imgWidth = realWidth;
                imgHeight = realHeight;
            }
            $(bigimg).css("width", imgWidth); //以最终的宽度对图片缩放
            var w = (windowW - imgWidth) / 2; //计算图片与窗口左边距
            var h = (windowH - imgHeight) / 2; //计算图片与窗口上边距
            $(innerdiv).css({ "top": h, "left": w }); //设置#innerdiv的top和left属性
            $(outerdiv).fadeIn("fast"); //淡入显示#outerdiv及.pimg
        });
        $(outerdiv).click(function() { //再次点击淡出消失弹出层
            $(this).fadeOut("fast");
        });
    }
    </script>
</body>
</html>

其他网友补充的函数

$(document).ready(function() {
  function zoomImage(event) {
    event.preventDefault();
    var image = $(this).find('img');
    var delta = event.originalEvent.deltaY || event.originalEvent.detail || event.originalEvent.wheelDelta;
    var zoom = delta > 0 ? -0.2 : 0.2;
    var newWidth = image.width() + (image.width() * zoom);
    var newHeight = image.height() + (image.height() * zoom);
    image.width(newWidth).height(newHeight);
  }
  $('div.image-container').on('mousewheel DOMMouseScroll', zoomImage);
});

在这个代码中，我们首先为每个包含图片的`div`元素附加了一个滚轮事件监听器，当用户在这些元素上滚动滚轮时，会调用`zoomImage`函数进行放大/缩小操作。
在`zoomImage`函数内部，我们首先通过`$(this).find('img')`选择器找到了当前元素内的`img`元素，接下来从滚轮事件中获取了用户的滚动方向，然后计算出当前图片的放大/缩小后的宽度和高度，并将其重新赋值给了图片元素。
值得注意的是，在这个代码中我们同时监听了`mousewheel`和`DOMMouseScroll`这两种不同浏览器的滚轮事件，以保证代码能够在不同的浏览器中正常运行。

小图图片函数 jQuery

1024 个赞