怎样用javascript获取鼠标中键滚动的方向

怎样用javascript获取鼠标中键滚动的方向,第1张

<script>

documentonmousewheel=function()

{

if(eventwheelDelta>=120)

alert('前滚');

else if(eventwheelDelta<=-120)

alert('后滚');

}

</script>

我大概理解到了你的意思,是想实现背景的视觉差效果吧。如果是这个的话两种方法,

一种是设置background-attachment:fixed;背景固定了

另外一种就是利用 animate css3的属性,想兼容更多的浏览器建议用jquery控制。感觉应该是你想要的效果了。

你说的这个是单页面效果。我给你个网址上面有好多这样的 >

我们使用的鼠标,很多都带有一个滚轮,方便用户的 *** 作。但遗憾的是,平时编程多数只利用到鼠标的左、右两键,如果将滚轮 *** 作功能也加进你的程序,定能使其增色不少。当鼠标指针指向窗体中时,Delphi为滚轮滚动提供OnMouseWheel事件,我们可以对它进行相应的处理。本例中,在窗体内放置一标签Label1,用于显示滚轮滚动的效果。 implementation var i:integer; procedure TForm1FormCreate(Sender: TObject); begin i:=0; Label1Caption:=inttostr(i); end; procedure TForm1FormMouseWheel(Sender: TObject; Shift: TShiftState; WheelDelta: Integer; MousePos: TPoint; var Handled: Boolean); begin if WheelDelta>0 then i:=i+1 else i:=i-1; //wheelDelta参数表示滚动一格的值,向上滚动为正数,向下滚动则为负数 Label1Caption:=inttostr(i); end;

Code highlighting produced by Actipro CodeHighlighter (freeware)>

浏览器差异:firefox滚轮事件是DOMMouseScroll,其他浏览器使用的是mousewheel

firefox事件的event对象使用detail值表示滚轮反向,(-3)表示向上,(3)表示向下。

其他浏览器使用wheelDelta值表示表示滚轮方向,(120)表示向上, (-120)表示向下。

监听事件,删除监听事件:IE678使用attachEvent/detachEvent, 其他浏览器使用addEventListener/removeEventListener。

fixedEvent:判断滚轮方向

fixedFn:滚动滚轮取消滚轮的默认滚动网页行为

elwheelHash:把fixedFn存放到对象的wheelHash属性

var mousewheel = (function(){

    var types =['DOMMouseScroll','mousewheel'];

    fixedEvent = function(e){

        ewheel = (ewheelDelta ewheelDelta : -edetail) > 0 1 : -1;// 通过事件判断鼠标滚轮反向,1是向上,-1是向下

        ewheelDir = ewheel > 0 'up' : 'down';    //这个只是描述 ewheel的值和滚轮方向的关系

        return e;

    };

    return{//返回mousewheel的方法

        on: function(el, fn, preventDefault){ //mousewheel对象的on方法, el触发mousewheel事件对象,fn触发后执行函数,preventDefault是否阻止默认行为:滚轮的网页滚动效果

            if(typeof preventDefault != 'boolean'){ //如果传入的实参preventDefault不是布尔值 

                preventDefault = true; //初始化为true

            }    

            var fixedFn = function(e){ //阻止默认行为函数

                e = fixedEvent(e || windowevent); // 兼容写法, 返回的e用来判断滚轮方向

                if(preventDefault){ // 如果需要阻止默认行为

                    if(epreventDefault){    //firefox

                        epreventDefault();

                    }

                    else{

                        ereturnValue = false; //ie

                    }

                };

                fncall(el, e); //el事件对象调用fn函数,参数为e; 注意fn中使用ewheel去判断鼠标滚轮事件

            },

            wheelHash = elwheelHash; //把包含fixedFn函数的 elwheelHash属性 赋值给 wheelHash

            if(!wheelHash){  //判断函数是否存在 wheelHash 对象

                wheelHsah = {};

                wheelHash[fn] = fixedFn;  //wheelHash对象的属性fn为阻止默认行为函数

                elwheelHash = wheelHash;  //把wheelHash对象赋值给el的wheelHash属性  wheelHash[fn] == elwheelHash[fn]

            }else{

                if(wheelHash[fn]) return; //如果存在 wheelHash 且 wheelHash中有 fixedFn 那么返回

                wheelHash[fn] = fixedFn;  //如果没有, 就把fixedFn赋值给wheelHashfn

            };

            if(documentaddEventListener){  //firefox

                var i = typeslength;  

                while(i--){  //循环滚轮事件 数组

                    eladdEventListener(types[i], fixedFn, false);    //firefox el监听滚轮事件,执行取消默认行为

                }

            }

            else{  //ie

                elattachEvent('onmousewheel', fixedFn);     // ie 监听事件, 处理函数fixedFn

            }

        },  

    //mousewheel中的on方法作用: 让元素监听事件,且处理是否执行默认行为。并且保存事件的阻止默认行为函数fixedFn到对象elwheelHash属性中,

        un: function(el, fn){

            if(!elwheelHash) return;  //如果对象不存在wheelHash, 直接跳出(没效果了);

            var wheelHash = elwheelHash;

            if(documentremoveEventListener){  //firefox

                var i = typeslength;

                while(i--){

                    elremoveEventListener(types[i],wheelHsah[fn], false);  //删除监听事件,执行取消默认行为

                }

            }else{ //ie

                eldetachEvent('onmousewheel', wheelHash[fn]);

            }

                delete wheelHash[fn]; //删除 默认行为函数

        },

    }

})();

//定义滚轮事件

// var myWheel = function(e){

    // consolelog(ewheelDir);

// }

//添加滚轮事件

// mouseWheelon(element, myWheel);

//删除滚轮事件

// mouseWheelun(element, myWheel);

以上就是关于怎样用javascript获取鼠标中键滚动的方向全部的内容,包括:怎样用javascript获取鼠标中键滚动的方向、html5怎样设置一个背景图片随着滚轮变动、Delphi鼠标滚轮如何编程等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9660587.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-30
下一篇2023-04-30

发表评论

登录后才能评论

评论列表(0条)

    保存