首页 > 代码库 > js整频滚动展示效果（函数节流鼠标滚轮事件）
js整频滚动展示效果（函数节流鼠标滚轮事件）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><link href="reset.css" rel="stylesheet" type="text/css" /><style type="text/css">#d1{ width:100%; height:850px; background:#069;overflow:hidden;}#d2{ width:100%; height:850px; background:#933;overflow:hidden;}#d3{ width:100%; height:850px; background:#060;overflow:hidden;}#d4{ position:fixed; top:50%; right:0;}#d4 a{ display:block; width:100px; height:100px;}#d4 .hover{ background:#063;}.duoyu{ width:100%; height:500px;}</style><body><div id="d4"> <ul> <li class="hover"><a href="javascript:void(0);">1</a></li> <li><a href="javascript:void(0);">2</a></li> <li><a href="javascript:void(0);">3</a></li> </ul></div><div id="d1"></div><div id="d2"></div><div id="d3"></div><div class="duoyu"></div><!--底部要加留底，否则在滚到最后一个已经到底了的时候位置永远到不了设置的滚动高度，就会一直执行死循环--><script src="jquery-1.9.0.min.js"></script><script type="text/javascript">$(function(){ var num=0,timer,num_max=2,dheight=850,//num_max是滚动个数减1;dheight是每个滚动元素的高度； nid=$("#d4 li"), d3=document.getElementById("d3"), d2=document.getElementById("d2"), d1=document.getElementById("d1"); function getScrollTop(e){ var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop){ return document.documentElement.scrollTop; } else if(document.body.scrollTop){ return document.body.scrollTop; } else{return scrollTop}//滚到最上方的是就是自己设置的scrollTop变量 } function setScrollTop(x){ if(document.documentElement&&document.documentElement.scrollTop){ document.documentElement.scrollTop=x; } else if(document.body.scrollTop){ document.body.scrollTop=x; } else{window.scrollTo(0,x)}//滚到最上方时时没有上面2个属性的只有window.scrollTo(0,x) } function throttle(method,context){//函数节流，method是要执行的函数，context是作用域函数 clearTimeout(method.tId);//先清除之前设置的定时器，定时器ID存储在函数的tId属性中 method.tId=setTimeout(function(){method.call(context)},100)//使用call（）来确保方法在适当的环境运行，如果没第2个参数就在全局执行 } function gun(e){ e=e||window.event; var top=getScrollTop(); num=Math.ceil((top+10)/dheight)-1; //留空10个像素防止零界点和滚动事件冲突； nid.eq(num).addClass("hover").siblings().removeClass(); console.log(num); } window.onscroll=function(e){ throttle(gun); }; nid.click(function(){//我很懒~！这里和下面的class切换用了JQ,不用也可以的 $(this).addClass("hover").siblings().removeClass(); num=nid.index($("#d4 li.hover")); //console.log(num); //(document.documentElement.scrollTop!=null)?scrollTOPl=document.documentElement.scrollTop:scrollTOPl=document.body.scrollTop; settimer(num*dheight); }) //$("a").index($("a.hover")) function settimer(num){ clearInterval(timer); timer=setInterval(function(){ var newss=getScrollTop(); var speed=(num-newss)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed);//如果newss等于0，（num-newss）/8那么speed也一直等于0，因为去整数了 if(newss==num){clearInterval(timer); console.log(speed); if(document.addEventListener){//重新添加事件监听 document.addEventListener(‘DOMMouseScroll‘,scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome } else{ console.log(speed); //if(speed==0){speed=num*dheight/8}; setScrollTop(newss+speed); } },30)}; function scrollFunc(e){ e=e || window.event; if(e.preventDefault) { // Firefox e.preventDefault(); } else{ // IE window.event.returnValue = false; } if(document.removeEventListener){//去除事件监听，让程序不能连续执行，要先执行完再添加事件监听 document.removeEventListener(‘DOMMouseScroll‘,scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=function(){return false};//使他等于NULL居然无效，不知道什么原因 if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta<0){ //alert("向下") if(num<num_max){ num++; nid.eq(num).addClass("hover").siblings().removeClass();} settimer(num*dheight);//要放到外面要不没有绑定到滚轮的事件监听 } else{ //alert("向上") if(num>0){ num--; nid.eq(num).addClass("hover").siblings().removeClass();} settimer(num*dheight); } }else if(e.detail){//Firefox if(e.detail>0){ //alert("向下") if(num<num_max){ num++; nid.eq(num).addClass("hover").siblings().removeClass();} settimer(num*dheight); } else{ //alert("向上") if(num>0){ num--; nid.eq(num).addClass("hover").siblings().removeClass();} settimer(num*dheight); } } } /*注册鼠标滚轮事件*/ if(document.addEventListener){ document.addEventListener(‘DOMMouseScroll‘,scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome })</script></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。