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

  • 相关阅读:
    提醒你一下, 你真的很垃圾, 创建一个maven 的web 项目都忘记了
    java web 项目中基础技术
    java 构造函数
    分布式简介
    RabbitMq 深入了解
    JS正则表达式验证数字非常全
    mui返回上个页面并刷新数据
    Windows环境下IOS APP打包上传AppStore详细流程
    crontab 详细用法 定时任务
    Linux epoll 源码注释
  • 原文地址:https://www.cnblogs.com/tianxiangbing/p/onmousewheel.html
Copyright © 2011-2022 走看看