js实现带缓动动画的导航栏效果
话不多说,请看实例代码:
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="utf-8"> <styletype="text/css"> ul,li{padding:0;margin:0;} li{list-style:none;} #box{ height:48px; width:900px; background-color:#459DF5; margin:50pxauto; position:relative; } #caution{ width:150px; height:48px; background-color:#4B92D8; position:absolute; top:0; left:0; } #list{ position:absolute; } #listli{ width:150px; height:48px; float:left; color:#fff; font:50020px/48px"微软雅黑"; text-align:center; cursor:pointer; } </style> <scripttype="text/javascript"> window.onload=function(){ //获取ulID varoUl=document.getElementById("list"); //获取spanID varcaution=document.getElementById("caution"); //获取ul所有孩子 varaLi=oUl.children; //定时器管理 vartimer=null; //缓动 varleader=0; vartarget=0; //停留 varcurrent=0; for(vari=0;i<aLi.length;i++){ //鼠标移动 aLi[i].onmouseover=function(){ //关闭定时器 clearInterval(timer); //获取当前的left值 target=this.offsetLeft; //开启定时器 timer=setInterval(autoCaution,20); } //鼠标点击 aLi[i].onmousedown=function(){ //清楚所有高亮的文字 for(varj=0;j<aLi.length;j++){ aLi[j].style.color="#fff"; } //当前点击栏变为红色 this.style.color="#ccc"; //提示框 current=this.offsetLeft; caution.style.left=current+"px"; } } //鼠标离开 oUl.onmouseout=function(){ //关闭定时器 clearInterval(timer); target=current; timer=setInterval(autoCaution,20); } //缓动动画 functionautoCaution(){ leader=leader+(target-leader)/10; caution.style.left=leader+"px"; } } </script> </head> <body> <divid="box"> <spanid="caution"></span> <ulid="list"> <li>首页</li> <li>公司简介</li> <li>企业文化</li> <li>招贤纳士</li> <li>企业论坛</li> </ul> </div> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!