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

  • 相关阅读:
    [转]CSS实现三角形的方法
    border:none 与border:0的区别
    jQuery选择器总结
    [转]利用CSS、JavaScript及Ajax实现图片预加载的三大方法
    [转]Javascript实现图片的预加载的完整实现
    [转]Javascript实现图片的预加载
    [转]资源预加载
    [转]css,javascript的预加载
    [转]预加载资源研究
    [转]移动WEB开发常用技巧
  • 原文地址:https://www.cnblogs.com/tianxiangbing/p/onmousewheel.html
Copyright © 2011-2022 走看看