jQuery 鼠标滚轮实现图片缩放

来源：互联网发布：轩辕网络新三板股票编辑：程序博客网时间：2024/04/28 00:44

合理的使用鼠标滚轮能很好的提高用户体验，今天就让我们看看 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

0 0