(4)关于整屏滚动的一些想法
一，其中元素的尺寸大小
html结构：
<html>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
css中，关于关于整屏滚动百分比尺寸，很重要的一点：
html,body,ul,ul li{width:100%;
height:100%;}
其中，html,body,ul,ul li这四个点，一个都不能少，少了一个，整个页面就没效果了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding:0; margin:0; list-style:none; } html,body,ul,ul li{ width:100%; height:100%; } ol{ position:fixed; right:20px; top:50%; list-style:none; margin-top:-42px; } ol li{ width:10px; height:10px; border:1px black solid; border-radius:10px; margin-top:5px; cursor: pointer; } .current{ background:white; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ol> <li class="current"></li> <li></li> <li></li> <li></li> <li></li> </ol> </body> <script type="text/javascript"> var ul = document.getElementsByTagName('ul')[0]; var ulLis=ul.getElementsByTagName('li'); var ol=document.getElementsByTagName('ol')[0]; var olLis=ol.getElementsByTagName('li'); var colorArr=['red','green','blue','pink','#565656'] //赋予颜色 for(var i=0;i<olLis.length;i++){ ulLis[i].style.background=colorArr[i]; ulLis[i].index=i; olLis[i].index=i; }; function Animation(target){ this.timer = setInterval(function(){ var leader=window.pageYOffset; var step=(target-leader)/10; step=step>0?Math.ceil(step):Math.floor(step); leader+=step; window.scrollTo(0,leader); if(leader==target){ clearInterval(window.timer); }; },30) }; for(var i=0;i<olLis.length;i++){ olLis[i].onmouseover=function(){ clearInterval(window.timer);//这里每触发一次鼠标事件，便必须清除上一次的定时器。这样，才不会使这一次的事件和上一次的事件发生冲突。 for(var i=0;i<olLis.length;i++){ olLis[i].className=''; }; olLis[this.index].className='current'; var target = ulLis[this.index].offsetTop; Animation(target); } }; function change(obj){ for( var i=0;i<olLis.length;i++){ olLis[i].className=''; olLis[obj].className='current'; } }; function mouseWheel(event){ clearInterval(window.timer); var index = event.target.index;//taeget.index是指ul中li，而li的index是要在前面赋予的。并不是自带的属性。 var length=ulLis.length; wheelDelta = event.detail; console.log(wheelDelta); if(index === length-1){ target=ulLis[index-1].offsetTop; wheelDelta<0?Animation(target):null; console.log(index); wheelDelta<0?change(index-1):null; } else if(index === 0){ target=ulLis[index+1].offsetTop; wheelDelta<0?null:Animation(target); wheelDelta<0?null: change(index+1); console.log(index); } else if(index>0||index<length-1){ target_01=ulLis[index-1].offsetTop; target_02=ulLis[index+1].offsetTop; wheelDelta>0?change(index+1):change(index-1); wheelDelta>0?Animation(target_02):Animation(target_01); console.log(index); } } ul.addEventListener('DOMMouseScroll',mouseWheel,false); </script> </html>
上面是firefox版。其中DOMMouseScroll是只有火狐才有的api,是鼠标滚轮滑动。
