晚上跟着视频敲了下弹性菜单的代码，先记下来

效果如下：

代码如下：

！doctype html html lang=' en ' head meta charset=' UTF-8 '标题文档/标题样式* { margin :0划水：0;} .ul1 { width:450px高度：30 px余量：20px汽车；位置：相对；}李{列表式：无；线高：30 px高度：30 px宽度宽度：100像素颜色：橙色；文本对齐：居中；float:left右边距：5 pxborder:1px soli # 000背景色：红色；} .标记{ position : absolute eleft :0 to :0飞越：隐藏；} .标记ul {宽度：450px位置：绝对；left:0top:0 }。mark ul li { color: # fff背景色color : deepskylblue }/style/head dyul class=' ul1 ' Li class=' mark ' ul Li首页/li li论坛/li li视频/li li课程/li /ul /li li class='box '首页/li li class='box '论坛/li li class='box '视频/li li class='box '课程/Li/ul/正文脚本窗口。onload=function(){ var oMark=document。' queryselector '。标记');var oBox=document。queryselectorall(' .方框');var child ul=omark。query selector(' ul ')；定义变量计时器=nullvar timer2=null/延迟定时器，100毫秒人的眼睛是察觉不出来的var iSpeed=0；for(var I=0；ioBox.lengthi ){ oBox[i].onmouseover=function(){ clear time out(计时器2)；startMove(这个。offsetleft)；};oBox[i].onmouseout=function(){ timer 2=setTimeout(function(){ startMove(0))；},100);};} omark。onmouseover=function(){ clear time out(计时器2)；};奥马克。onmouseout=function(){ timer 2=setTimeout(function(){ startMove(0))；},100);};函数startMove(iTarget){ clearInterval(计时器);timer=SetInterval(function(){ isPeed=(itar get-omark。offset left)/5；iSpeed *=0.75if(数学。ABS(iSpeed)=1数学。ABS(itar get-omark。offsetleft)=1){ clearInterval(定时器);奥马克。风格。left=itar get ' px孩子ul。风格。left=-itar get ' px '；iSpeed=0；} else { omark。风格。左=omark。offsetleft是提要“px”；查尔杜。风格。左=-奥马克。offsetleft ' px} },30);};};/script/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！