小程序怎样制作_基于JavaScript完成屏幕滚动效果

基于JavaScript实现屏幕滚动效果       这篇文章主要为大家详细介绍了基于JavaScript实现屏幕滚动效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
var olBoxLi = olBox.children; var bgColor = ["pink","purple","orange","blue","green"]; var leader = 0,target = 0,timer = null; for(var i= 0; i ulBoxLi.length; i++) ulBoxLi[i].style.backgroundColor = bgColor[i]; olBoxLi[i].style.backgroundColor = bgColor[i]; olBoxLi[i].index = i; // 记录当前的索引号 olBoxLi[i].onclick = function() { clearInterval(timer); target = ulBoxLi[this.index].offsetTop; // 核心语句 timer = setInterval(function() { leader = leader + (target - leader ) /10; window.scrollTo(0,leader); // 屏幕滑动 //pic.style.left = leader + 'px'; },30) /script /head body ul id="ul" li 首页 /li li 关注 /li li 动态 /li li 风格 /li li 作品 /li /ul ol id="ol" li 首页 /li li 关注 /li li 动态 /li li 风格 /li li 作品 /li /ol /body /html

效果:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。