js实现继承|纯JS实现弹性导航条效果

【www.bbyears.com--js教程】

效果图：

代码如下：

 

<script>

var left = 0;

var iSpeed = 0;

function move(obj,iTarget){

 clearInterval(obj.timer);

 obj.timer = setInterval(function(){

 iSpeed+=(iTarget-left)/5;

 iSpeed*=0.75;

 left+=iSpeed;

 obj.style.left = left+'px';

 if(Math.round(iSpeed)==0&&Math.round(left)==iTarget){

  clearInterval(obj.timer);

 }

 },30);

}

window.onload = function(){

 var aLi = document.getElementsByTagName('li');

 var oBlock = document.getElementById('block_box');

 var iNow = 0;

 for(var i=0;i

 ;(function(index){

  aLi[i].onmouseover=function(){

  //oBlock.style.left=index*aLi[0].offsetWidth+'px';

  move(oBlock,index*aLi[0].offsetWidth);

  };

  aLi[i].onmouseout=function(){

  //oBlock.style.left=0;

  move(oBlock,iNow*aLi[0].offsetWidth);

  };

  aLi[i].onclick=function(){

  iNow=index;

  };

 })(i);

 }

};

</script>

 首页

 CSS课程

 JS课程

 HTML5课程

 视频教程

 课程案例

 联系方式

本文来源：http://www.bbyears.com/wangyezhizuo/128802.html