javascript滚轮事件基础实例讲解(37)
本文实例为大家分享了js滚轮事件的具体代码,供大家参考,具体内容如下
<html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box1{ width:100px; height:100px; background-color:red; } </style> <scripttype="text/javascript"> window.onload=function(){ //使div可以跟随鼠标滚轮滚动来改变高度 //滚轮向下滚,div变高滚轮向上滚div变短 //获取box1 varbox1=document.getElementById("box1"); /* *onmousewheel *-鼠标滚轮滚动的事件,但是该事件火狐浏览器并不支持 *-在火狐中需要使用DOMMouseScroll,这个事件只能通过addEventListener()来绑定 */ //为box1绑定一个鼠标滚轮滚动的事件 box1.onmousewheel=function(event){ event=event||window.event; //判断滚轮滚动的方向 /* *wheelDelta *-事件对象中的属性,可以用来判断鼠标滚轮滚动的方向 *-向下滚-120向上滚+120 *-该属性的值并不重要,重要的是值的符号,需要通过符号来判断滚动的方向 *-但是该属性火狐浏览器并不支持 */ //alert(event.wheelDelta); /* *火狐中通过detail来判断方向 *-向上滚-3向下滚+3 */ //alert(event.detail); if(event.wheelDelta<0||event.detail>0){ //向下滚 //增加box1的高度 box1.style.height=box1.offsetHeight+10+"px"; }else{ //向上滚 //减小box1的高度 box1.style.height=box1.offsetHeight-10+"px"; } /* *使用addEventListener()绑定的事件,不能通过returnfalse来取消默认行为 *需要调用事件对象preventDefault()方法来取消默认行为 *但是在IE8中没有该方法 */ event.preventDefault&&event.preventDefault(); //当页面中有滚动条时,由于滚轮滚动的默认行为会导致页面整体下移 //取消默认行为 returnfalse; }; bind(box1,"DOMMouseScroll",box1.onmousewheel); }; functionbind(obj,eventStr,callback){ if(obj.addEventListener){ //如果是正常浏览器 obj.addEventListener(eventStr,callback,false); }else{ //IE8 obj.attachEvent("on"+eventStr,function(){ callback.call(obj); }); } } </script> </head> <bodystyle="height:3000px;"> <divid="box1"></div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。