基于Java脚本语言实现屏幕滚动效果

屏幕滚动效果：

html head lang=' en ' meta charset=' UTF-8 ' title/title style ul，ol { list-style-type : none；} * { margin:0划水：0;} html，正文{宽度： 100%；高度： 100%;} # ul {宽度： 100%；高度： 100%;} ul Li {宽度： 100%；高度： 100%;} #ol {位置：固定；top :0 left :50 px } # ol Li { width : 50px高度： 50pxborder: 1px固体# 000;}/style脚本src=' http : my。js ' type=' text/JavaScript '/script脚本窗口。onload=function(){ var ULBox=$(' ul ')；var ULBoxli=ULBox . children var OLBox=$(' ol ')；var olBoxLi=olbox . children var bgColor=['粉色','紫色','橙色','蓝色','绿色'];var leader=0，target=0，timer=null for(var I=0；iulBoxLi.lengthI){ ULBoxli[I]。风格。background COlOr=BG COlOr[I]；olBoxLi[I]。风格。background COlOr=BG COlOr[I]；olBoxLi[i].索引=我；//记录当前的索引号olBoxLi[i].onclick=function(){ clearInterval(计时器);target=ulBoxLi[this.index].offsetTop//核心语句timer=setInterval(function(){ leader=leader(target-leader)/10；window.scrollTo(0，leader)；//屏幕滑动//pic。风格。left=leader ' px}，30)} } }/脚本/head dyul id=' ul ' Li首页/li li关注/li li动态/li li风格/li li作品/li/ulol id='ol' li首页/li li关注/li li动态/li li风格/li li作品/li/ol/body/html效果：

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