纯射流研究…实现弹性导航条效果

效果图：

代码如下：

！doctype html html head meta charset=' UTF-8 ' title title/title style * { margin :0；划水：0;列表式：无；} ul { overflow:hidden背景# ccc宽度宽度width:574pxmargin:100px汽车位置：相对；} ul li { float:left宽度：80 px高度：40 px文本对齐：居中；线高：40 pxborder:1px固体# 000;位置：相对；z索引：2;} # block _ box {位置：绝对值；top:0left:0背景技术： # 399;z索引：1;}/style脚本var left=0；var iSpeed=0；函数move(obj，itar get){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ iSpeed=(itar get-left)/5；iSpeed *=0.75left=iSpeedobj。风格。left=left ' pxif(数学。回合(I速度)=0路径。圆形(左)=itar get){ clearInterval(obj。计时器)；} },30);}窗口。onload=function(){ var AlI=document。getelementsbytagname(' Li ')；var oBlock=文档。getelementbyid(' block _ box ')；var Inow=0；for(var I=0；爱莉。长度-1；I){；（函数（索引){ aLi[i].onmouseover=function(){//ObLock。风格。left=index * AlI[0]。offsetwithts ' pxmove(oBlock，index*aLi[0]).偏移)；};aLi[i].onmouseout=function(){//ObLock。风格。left=0；移动(oBlock，iNow*aLi[0]).偏移)；};aLi[i].onclick=function(){ iNow=index；};})(一)；}};/剧本/导演：李首页/Li LICs课程/li liJS课程/Li Li tml 5课程/li li视频教程/li li课程案例/li li联系方式/Li Li id=' block _ box '/Li/ul/body/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！