• 技术文章 >web前端 >js教程

    基于jquery的滚动鼠标放大缩小图片效果_jquery

    2016-05-16 18:00:04原创623
    今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是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请点击这里:滚动鼠标放大缩小图片效果
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:滚动鼠标 放大缩小
    上一篇:基于jquery的无限级联下拉框js插件_jquery 下一篇:对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!_javascript技巧
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 简单了解JavaScript数据结构与算法之栈• 11个可以提升效率的chrome调试技巧• 一文搞定JavaScript的节点操作• JavaScript类数组和可迭代对象的实现原理详解• javascript web页面刷新的方法收集_javascript技巧
    1/1

    PHP中文网