最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
纯JS实现弹性导航条效果
时间:2017-05-27 编辑:简简单单 来源:一聚教程网
效果图:
代码如下:
代码如下 | 复制代码 |
*{margin:0; padding:0; list-style:none;} ul{ overflow:hidden; background:#ccc; width:574px; margin:100px auto; position:relative;} ul li{ float:left; width:80px; height:40px; text-align:center; line-height:40px; border:1px solid #000; position:relative; z-index:2;} #block_box{ position:absolute; top:0; left:0; background:#399; z-index:1;} 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); } };
|
-
上一个: JS实现颜色动态淡化效果
-
下一个: 正则表达式进行页面表单验证功能
相关文章
- js实现二级导航功能 05-18
- js实现导航吸顶效果 05-03
- js实现楼层导航功能 04-27
- js实现横向拖拽导航条功能 04-14
- js实现带缓动动画的导航栏效果 02-04
- js 漂亮的树形导航条代码 07-20