Jquery鼠标滚轮放大缩小图片

来源：互联网发布：网页优化 php 编辑：程序博客网时间：2024/04/28 02:09

使用Jquery鼠标点击图片，划动鼠标滚轮放大缩小图片。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>    <title>鼠标滚轮放大图片</title>    <style type="text/css">        img{            border:2px solid #000000;            margin:10px;        }                body{            font-family:Verdana,Arial,sans-serif;            font-size:80%;            margin:0;            padding:0;        }                div.body{margin:10pt}     </style>    <script type="text/javascript" src="JS/jquery-1.5.1.min.js"></script>    <script type="text/javascript">        $(function(){            $(".body img").each(function(){                if($.browser.msie){                    $(this).bind("mousewheel",function(e){                        var e=e||event,v=e.wheelDelta||e.detail;                        if(v>0)                            resizeImg(this,false);                            else                                resizeImg(this,true);                           window.event.returnValue=false;                           return false;                    })                }else{                    $(this).bind("DOMMouseScroll",function(event){                        if(event.detail<0)                            resizeImg(this,false);                            else                                resizeImg(this,true);                            event.preventDefault();                    })                }            });                        function resizeImg(node,isSmall){                if(!isSmall){                    $(node).height($(node).height()*1.2);                }else{                    $(node).height($(node).height()*0.8);                }            }        });    </script></head><body><div class="body">    <img src="Images/P_022.jpg" alt="点击图片，划动鼠标滚轮放大缩小图片" />    <img src="Images/P_034.jpg" alt="点击图片，划动鼠标滚轮放大缩小图片" /></div></body></html>

运行效果图：

原图：

划动滚轮后的图片：

0 0