<!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>