Jquery鼠标滚轮放大缩小图片

最新推荐文章于 2022-03-18 10:42:38 发布

treeMountain

最新推荐文章于 2022-03-18 10:42:38 发布

阅读量8.6k

点赞数 3

分类专栏： JQuery 文章标签： jquery 放大缩小图片

JQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

使用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>

运行效果图：

原图：

划动滚轮后的图片：

treeMountain

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jquery鼠标滚轮放大缩小图片

使用Jquery鼠标点击图片，划动鼠标滚轮放大缩小图片。鼠标滚轮放大图片 img{ border:2px solid #000000; margin:10px; } body{ font-family:Verda
复制链接

扫一扫