zoukankan      html  css  js  c++  java
  • 滚动鼠标放大缩小图片效果,兼容火狐

         今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的DOMMouseScroll来处理这个功能,代码如下,并加上注意的注释项:

    $(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;//去掉浏览器默认滚动事件
                        //e.stopPropagation();
                        return false;
                })
            }else{
            $(this).bind("DOMMouseScroll",function(event){
                if(event.detail<0)
                resizeImg(this,false);
                else
                resizeImg(this,true);
                event.preventDefault()//去掉浏览器默认滚动事件  

              //event.stopPropagation();        })
            }
        });
        function resizeImg(node,isSmall){
            if(!isSmall){
                $(node).height($(node).height()*1.2);
            }else
            {
                $(node).height($(node).height()*0.8);            
            }
        }
    });

     本文的demo请点击这里:滚动鼠标放大缩小图片效果,兼容火狐

  • 相关阅读:
    MobaXterm
    记一次完整的java项目压力测试
    jvm调优
    好用的公共dns服务器推荐(免费)
    SpringBoot,Security4, redis共享session,分布式SESSION并发控制,同账号只能登录一次
    javaCV资料目录
    基于JavaCV技术实现RTMP推流和拉流功能
    Java线程池详解
    微服务实战SpringCloud之Feign简介及使用
    【DP专题】——洛谷P5144蜈蚣
  • 原文地址:https://www.cnblogs.com/tianxiangbing/p/onmousewheel.html
Copyright © 2011-2022 走看看