jQuery 鼠标滚轮实现图片缩放

最新推荐文章于 2022-10-24 19:58:22 发布

lijunlinlijunlin

最新推荐文章于 2022-10-24 19:58:22 发布

阅读量1.2k

点赞数

分类专栏： javaScript

javaScript 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

合理的使用鼠标滚轮能很好的提高用户体验，今天就让我们看看 jQuery 鼠标滚轮实现图片的缩放。首先，直接给出缩放方法如下：

function zoomImg(o) {
    var zoom = parseInt(o.style.zoom, 10) || 100;
    zoom += event.wheelDelta / 2; //可适合修改
    if (zoom > 0)
        o.style.zoom = zoom + '%';
}

方法在这里就不做说明了，如果不清楚原理，可以设置断点来调试下，可以参考下Google Chrome调试js入门。方法中参数为 DOM 对象（即当前图片），调用如下：

$(document).ready(function() {
    $("img").bind("mousewheel", function() {
        zoomImg(this);
        return false;
    });
});

到这我们就实现了鼠标滚轮来实现对图片的缩放功能，用户滚动鼠标滚轮时即可实现图片的缩放，提高了用户体验。

html代码

<html>
   <head>
       <meta http-equiv="Content_Type" content="text/html; charset=utf-8"/>
       <title>jQuery 鼠标滚轮实现图片缩放</title>
       <script type="text/javascript" src="jquery-1.8.0.js"></script>
       <script type="text/javascript">
           function zoomImg(o) {
               var zoom = parseInt(o.style.zoom, 10) || 100;
               zoom += event.wheelDelta / 2; //可适合修改
               if (zoom > 0){
                   o.style.zoom = zoom + '%';
               }
           }
           $(document).ready(function() {
               $("img").bind("mousewheel", function() {
                   zoomImg(this);
                   return false;
               });
           });
       </script>
   </head>
   <body>
       <div>
           <img src="E:\\3-130514100338.jpg"/>
       </div>
   </body>
</html>

查看演示

作者：jQuery学习
除非注明，jQuery学习网文章均为原创，转载时必须以链接形式标明本文地址。
本文地址：http://www.jquery001.com/jquery-mousewheel-zoom-image.html

lijunlinlijunlin

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 鼠标滚轮实现图片缩放

合理的使用鼠标滚轮能很好的提高用户体验，今天就让我们看看 jQuery 鼠标滚轮实现图片的缩放。首先，直接给出缩放方法如下：function zoomImg(o) { var zoom = parseInt(o.style.zoom, 10) || 100; zoom += event.wheelDelta / 2; //可适合修改 if (zoom > 0)
复制链接

扫一扫

专栏目录