QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com

滚动鼠标放大缩小图片效果,兼容火狐

     今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是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请点击这里:滚动鼠标放大缩小图片效果,兼容火狐

posted @ 2011-10-26 14:38  田想兵  阅读(1738)  评论(7编辑  收藏  举报
联系QQ:55342775,QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com