js-弹性点击菜单
来源：互联网 发布：软件代码保护 编辑：程序博客网 时间：2024/06/05 20:41
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="Keywords" content="" /><meta name="Description" content="" /><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><style type="text/css">*{margin:0;padding:0;}#box{width:800px;margin:100px auto;height:31px;font-size:12px;position:relative;}#box dd{color:#373737;display:inline;float:left;width:100px;height:30px;line-height:30px;text-align:center;cursor:pointer;background-color:#ECF2EA;border-bottom:1px solid #7EC326;}#box dt{width:100px;height:5px;background-color:#7EC326;position:absolute;left:0;bottom:0;}</style><script type="text/javascript"><!--var iSpeed=0;var iLeft=0;var nub=0;function $(obj){return document.getElementById(obj)};function startMove(obj,attr){clearInterval(obj.oTime);obj.oTime=setInterval(function(){iSpeed+=(attr-obj.offsetLeft)/5;iSpeed*=0.7;iLeft+=iSpeed;if(Math.abs(iSpeed)<1 && Math.abs(attr-obj.offsetLeft)<1){clearInterval(obj.oTime);obj.style.left=attr+'px';}else{obj.style.left=iLeft+'px';}},30)}window.onload=function(){var i=0;var oDd=$('box').getElementsByTagName('dd');for(i=0;i<oDd.length;i++){oDd[i].onmouseover=function(){startMove($('dt'),this.offsetLeft)}oDd[i].onclick=function(){nub=this.offsetLeft;}oDd[i].onmouseout=function(){startMove($('dt'),nub)}}}//--></script></head><body><dl id="box"><dt id="dt"></dt><dd>一</dd><dd>二</dd><dd>三</dd><dd>四</dd><dd>五</dd><dd>六</dd></dl></body></html>
