js鼠标滑轮滚动事件绑定的简单实例

 本篇文章主要介绍了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;  
            }  
        }  
 

时间: 2025-01-29 08:49:23

js鼠标滑轮滚动事件绑定的简单实例的相关文章

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

复制代码 代码如下: /** Event handler for mouse wheel event.          *鼠标滚动事件          */          var wheel = function(event) {              var delta = 0;              if (!event) /* For IE. */                  event = window.event;              if (event.w

JS实现点击事件统计的简单实例_javascript技巧

JS实现网站点击事件的统计功能. 点击事件上报,分为立即上报和延时上报,延时上报通过cookie存储. 一.配置参数,主要用于定义上报的一些配置信息.通过在外部定义_clickc对象重置参数. 参数名称       类型          默认值             说明     selector:      string        '_click_rp'        点击触发的选择器,支持ID.class     prefix:        string        '_rp_'

鼠标滚动监听-html页面如何根据鼠标滑轮滚动实现透明度的渐变

问题描述 html页面如何根据鼠标滑轮滚动实现透明度的渐变 我想实现鼠标向下滚动透明度由高变低,向上滚动透明度由低变高的效果,停止滚动则停止变化,望各位大神不吝贴码! 解决方案 因为无法直接获取和改变透明度的值,可以把透明度值赋给一个变量,让变量变化,最后把变量的值再赋给元素的透明值.然后判断目标值和目前透明值,来判定是正向速度还是负向速度.如果透明值达到目标值,关掉定时器,否则透明值继续变化.最后把值赋给元素,因为透明度有兼容问题,所以要写上两个写法.根据这个思路走吧. 解决方案二: 不懂你要

JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例_javascript技巧

JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例 document.oncontextmenu = function(){return false}; //禁止鼠标右键菜单显示 var res = document.getElementById('box'); //找到id为box的div document.body.onmouseup = function(e){ //在body里点击触发事件 if(e.button===2){ //如果button=1(鼠标左键),butto

js网页滚动条滚动事件实例分析

  本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <style

请教一个html 用js脚本 有关添加事件绑定的问题

问题描述 请教一个html 用js脚本 有关添加事件绑定的问题 问题描述: 一个页面a.html中通过iframe内嵌了一个子页面b.html(这个无权修改),b.html中有一个按钮cButton, 这个按钮上已经有一个 onclick 事件dFunc.现在我想 通过在a.html中加一段脚本为这个cButton 再追加一个onclick 事件fFunc.实现 在点击cButton 时,首先执行dFunc然后执行fFunc.请问这样的话,js脚本应该怎样写?

鼠标滑轮滚动放大缩小图片

问题描述 java中用鼠标滑轮滚动放大缩小图片怎么实现?哪位高手指点下,谢谢!

js网页滚动条滚动事件实例分析_javascript技巧

本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 <style type="text/css"> #top_div{ position:fixed; bottom:80px; rig

js读取被点击次数的简单实例

这篇文章主要介绍了js读取被点击次数的简单实例(从数据库中读取).需要的朋友可以过来参考下,希望对大家有所帮助 是每次点击时获取一共点击了多少次是吧 1.可以再服务器端拖一个隐藏的隐藏的button控件,然后写button的Click事件,这个事件的作用是从数据库中调取一共被点击的次数. 2.把被点击的次数赋给一个隐藏的TextBox控件的Text属性. 3.在你的js函数validata()里触发服务器端的button控件的click事件 fuction validata()" { docum