js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)

 更新时间:2014年01月14日 08:50:55   作者:  
本篇文章主要介绍了js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)。需要的朋友可以过来参考下,希望对大家有所帮助
复制代码 代码如下:

/** Event handler for mouse wheel event.
         *鼠标滚动事件
         */ 
        var wheel = function(event) { 
            var delta = 0; 
            if (!event) /* For IE. */ 
                event = window.event; 
            if (event.wheelDelta) { /* IE/Opera. */ 
                delta = event.wheelDelta / 120; 
            } else if (event.detail) { 
                /** Mozilla case. */ 
                /** In Mozilla, sign of delta is different than in IE.
                 * Also, delta is multiple of 3.
                 */ 
                delta = -event.detail / 3; 
            } 
            /** If delta is nonzero, handle it.
             * Basically, delta is now positive if wheel was scrolled up,
             * and negative, if wheel was scrolled down.
             */ 
            if (delta) 
                handle(delta); 
            /** Prevent default actions caused by mouse wheel.
             * That might be ugly, but we handle scrolls somehow
             * anyway, so don't bother here..
             */ 
            if (event.preventDefault) 
                event.preventDefault(); 
            event.returnValue = false; 
        } 

        /** Initialization code. 
         * If you use your own event management code, change it as required.
         */ 
        if (window.addEventListener) { 
            /** DOMMouseScroll is for mozilla. */ 
            window.addEventListener('DOMMouseScroll', wheel, false); 
        } 
        /** IE/Opera. */ 
        window.onmousewheel = document.onmousewheel = wheel; 

        /** This is high-level function.
         * It must react to delta being more/less than zero.
         */ 
        var handle = function(delta) { 
            var random_num = Math.floor((Math.random() * 100) + 50); 
            if (delta < 0) { 
                // alert("鼠标滑轮向下滚动:" + delta + "次!"); // 1 
                $("btn_next_pic").onclick(random_num); 
                return; 
            } else { 
                // alert("鼠标滑轮向上滚动:" + delta + "次!"); // -1 
                $("btn_last_pic").onclick(random_num); 
                return; 
            } 
        } 

相关文章

  • 有趣的script标签用getAttribute方法来自脚本吧

    有趣的script标签用getAttribute方法来自脚本吧

    有趣的script标签用getAttribute方法来自脚本吧...
    2007-03-03
  • 微信小程序 css使用技巧总结

    微信小程序 css使用技巧总结

    这篇文章主要介绍了微信小程序 css使用技巧总结的相关资料,需要的朋友可以参考下
    2017-01-01
  • Javascript学习笔记 delete运算符

    Javascript学习笔记 delete运算符

    关于javascript的delete运算符,MDN里有相关文档。以下是我的学习笔记,更多是要关注特殊情况的使用和注意点。
    2011-09-09
  • 开启BootStrap学习之旅

    开启BootStrap学习之旅

    当下最流行的前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢,你如果也喜欢Bootstrap前端开发框架,不要错过这次旅行
    2016-05-05
  • js的for in循环和java里foreach循环的区别分析

    js的for in循环和java里foreach循环的区别分析

    这篇文章主要介绍了js的for in循环和java里foreach循环的区别,实例分析了js的for in循环使用技巧并说明了与Java中foreach循环的使用区别,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • javascript比较两个日期相差天数的方法

    javascript比较两个日期相差天数的方法

    这篇文章主要介绍了javascript比较两个日期相差天数的方法,涉及javascript针对日期的转换与比较的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • 纯JS 绘制数学函数

    纯JS 绘制数学函数

    今天闲来无事用js写了个数学绘图包,还不算完整,不过总出现了雏形。
    2009-04-04
  • js中toString方法3个作用

    js中toString方法3个作用

    这篇文章主要给大家分享了js中toString方法的3个作用,文章围绕js中toString方法的相关资料展开全文内容,需要的小伙伴可以参考一下,希望对你的学习有所帮助
    2021-12-12
  • 轻松掌握JavaScript单例模式

    轻松掌握JavaScript单例模式

    这篇文章主要为大家详细介绍了JavaScript单例模式,帮助大家轻松掌握JS单例模式,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • vue 集成腾讯地图实现api(附DEMO)

    vue 集成腾讯地图实现api(附DEMO)

    之前项目使用腾讯地图,不利于开发者查找,这篇文章主要介绍了vue 集成腾讯地图实现api,具有一定的参考价值,感兴趣的可以了解下
    2021-07-07

最新评论