基于jquery怎么实现滚轮放大缩小图片

阅读：552 来源：乙速云作者：代码code

基于jquery怎么实现滚轮放大缩小图片

（1）滚轮控制放大缩小图片。

实现代码如下：




    
    
    
    
    
    
    $(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;
                });
        });
    })

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

实现代码如下：



 

    
    
    
    
    
    
    
    $(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;
                });
        });
    })

其他网友补充的函数

$(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`元素，接下来从滚轮事件中获取了用户的滚动方向，然后计算出当前图片的放大/缩小后的宽度和高度，并将其重新赋值给了图片元素。

分享到：

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们： hlamps#outlook.com （#换成@）。

上一篇： Jquery选择器怎么使用

下一篇： ffmpeg在Windows平台下怎么编译及集成

你可能感兴趣