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请点击这里:滚动鼠标放大缩小图片效果,兼容火狐

  • 相关阅读:
    Mysql性能优化之---(一)
    好好思考之(二)---介绍什么是思维模型,分析它的本质内涵
    好好思考-----概述(一)
    oracle 的安装 及环境的配置...
    数据结构中的树
    生成SSH秘钥连接github(详细教程)
    后端 SpringBoot + 前端 vue 打包发布到Tomcat
    vue 轮播图
    vue文字向上滚动
    数组去重
  • 原文地址:https://www.cnblogs.com/tianxiangbing/p/onmousewheel.html
Copyright © 2011-2022 走看看