简单的屏幕滚动切换效果

来源:互联网 发布:积极优化征地制度 编辑:程序博客网 时间:2024/06/18 16:33
<script>
var ul=document.getElementsByTagName("ul")[0];
var li1=ul.getElementsByTagName("li");
var ol=document.getElementsByTagName("ol")[0];
var li2=ol.getElementsByTagName("li");
var timer=null;
var leader=0;
var target=0;
for(var i =0;i<li1.length;i++){
li2[i].index=i;
li2[i].onclick=function(){
for(var j =0;j<li2.length;j++){
li2[j].className="";
}
this.className="current";
clearInterval(timer);
target=li1[this.index].offsetTop;
timer=setInterval(function(){
var step=(target-leader)/10;
step=step>0?Math.ceil(step):Math.floor(step);
leader=leader+step;
window.scrollTo(0,leader);
if (leader==target) {
clearInterval(timer);
}
},30)
}
}
</script>
原创粉丝点击