鼠标滚轮事件

来源：互联网发布：对人工智能的看法400字编辑：程序博客网时间：2024/05/16 04:01

鼠标的滚轮事件

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title>  <style>*{margin:0;padding:0;}html,body{width:100%;height:100%;overflow:hidden;}.big-box{width:100%;height:500%;color:white;position:absolute;left:0;top:0;}.box{width:100%;height:20%;}.box1{background-color:blue;}.box2{background-color:yellow;}.box3{background-color:red;}.box4{background-color:purple;}.box5{background-color:black;}.controls{position:absolute;right:20px;top:20%;}ul{list-style:none;}li{width:50px;height:50px;background-color:pink;margin-bottom:10px;font:bold 22px/50px "宋体";text-align:center;}li.active{background-color:white;}  </style> </head> <body><div class="big-box" id="big_box"><div class="box box1"><h1>box01</h1></div><div class="box box2"><h1>box02</h1></div><div class="box box3"><h1>box03</h1></div><div class="box box4"><h1>box04</h1></div><div class="box box5"><h1>box05</h1></div></div><div class="controls"><ul><li class="active">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div><script>/*需求：滚轮滚动切换思路：第一步：获取到所要操作的节点对象（big_box,所有的li）第二步：绑定鼠标滚动滚动事件给document第三步：执行逻辑：关键点是：索引*/var big_box = document.getElementById("big_box"); //big_boxvar lis = document.getElementsByTagName("li");  //所有的livar index = 0;  //控制索引var flag = true; //开//onmousewheel 标准//DOMMouseScroll 火狐//绑定鼠标滚轮事件给documentaddEvent(document,"mousewheel",handler)addEvent(document,"DOMMouseScroll",handler)function handler(e){if(flag){flag = false;  //关var height = document.body.clientHeight; //当前屏幕的高度var _event = window.event||e;  //事件对象//detail  滚轮向上滚-3   向下：3    火狐//wheelDelta 滚轮向上滚120   向下：-120  IE 谷歌var num = _event.detail||_event.wheelDelta;  if(num==-3||num==120){ //滚轮向上滚//alert("滚轮向上↑滚");index--;if(index<0){index = 0;}}else{  //滚轮向下滚//alert("滚轮向下↓滚");index++;if(index>lis.length-1){index = lis.length-1;}}var v = -1*index*height + "px";//alert(big_Box);big_box.style.top = v;for(var i = 0;i<lis.length;i++){lis[i].className = "";}lis[index].className = "active";setTimeout(function(){flag = true;},1000)  }}  /*小工具：实现事件监听的兼容处理参数：dom：事件目标type:事件类型fn：事件处理程序  */function addEvent(dom,type,fn){if(dom.addEventListener){dom.addEventListener(type,fn);}else{dom.attachEvent("on" + type,fn);}}</script> </body></html>

禁止滚轮事件

$(document).bind("mousewheel",function(){return  false;});

不让屏幕出现滚动条

body:{overflow-y:hidden;}

1 0