纯JS实现弹性导航条效果
2017-03-06 16:08
645 查看
效果图:
代码如下:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{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;} </style> <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<aLi.length-1;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> </head> <body> <ul> <li>首页</li> <li>CSS课程</li> <li>JS课程</li> <li>HTML5课程</li> <li>视频教程</li> <li>课程案例</li> <li>联系方式</li> <li id="block_box"></li> </ul> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- Android 实现界面的滑动导航条指引效果
- jQuery关于导航条背景切换效果实现示例
- Android 弹性ListView和ScrollView 简单优雅地实现回弹效果
- 【转载】JS实现弹性菜单效果
- JS实现弹性菜单效果代码
- 实现支付宝经典导航条效果
- jquery实现隐藏在左侧的弹性弹出菜单效果
- js实现适用于素材网站的黑色多级菜单导航条效果
- js实现适用于素材网站的黑色多级菜单导航条效果
- jquery实现隐藏在左侧的弹性弹出菜单效果
- jQuery关于导航条背景切换效果实现示例
- 三角形变形记之纯css实现的分布导航条效果
- 自定义ScrollView实现弹性效果
- jquery实现的蓝色二级导航条效果代码
- 纯css实现网站导航条下拉效果
- Android 实现ListView 3D效果 - 2 - 弹性滚动,Fling
- 弹性ScrollView,和下啦刷新的效果类似 实现下拉弹回和上拉弹回
- android viewpager 弹性效果的实现,首页往左拉弹回,尾页往右拉弹回
- JS实现弹性漂浮效果的广告代码
- JS+CSS实现带有碰撞缓冲效果的竖向导航条代码