脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 弹性导航条效果

纯JS实现弹性导航条效果

 更新时间：2017年03月06日 16:08:20   作者：shangpudxd  
本文主要介绍了纯JS实现弹性导航条效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧

效果图：

代码如下：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript实现计算器的四则运算功能

    JavaScript实现计算器的四则运算功能

    这篇文章主要为大家介绍了如何通过JavaScript实现计算器的四则运算功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起动手试试
    2022-02-02
  • JavaScript去除字符串两端空格的三种方法

    JavaScript去除字符串两端空格的三种方法

    本文主要介绍了JavaScript去除字符串两端空格的三种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • 你不知道的前端console用法分享

    你不知道的前端console用法分享

    console一定是各位前端最熟悉的小伙伴了,有些网站还会在控制台输出一些有意思的东西,下面这篇文章主要给大家介绍了关于前端console用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-08-08
  • JavaScript fetch接口案例解析

    JavaScript fetch接口案例解析

    本文通过案例给大家介绍了JavaScript fetch接口,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-08-08
  • ES6 Set结构的应用实例分析

    ES6 Set结构的应用实例分析

    这篇文章主要介绍了ES6 Set结构的应用,结合实例形式分析了ES6 set结构的功能、特点、常见用法及相关操作注意事项,需要的朋友可以参考下
    2019-06-06
  • JavaScript实现二叉树定义、遍历及查找的方法详解

    JavaScript实现二叉树定义、遍历及查找的方法详解

    这篇文章主要介绍了JavaScript实现二叉树定义、遍历及查找的方法,结合实例形式较为详细的分析了二叉树的相关概念及javascript构建二叉树、遍历、查找二叉树的常用操作技巧,需要的朋友可以参考下
    2017-12-12
  • HTML在线编辑器的基本概念与相关资料

    HTML在线编辑器的基本概念与相关资料

    HTML在线编辑器的基本概念与相关资料...
    2007-03-03
  • JS模拟面向对象全解（二、类型与赋值）

    JS模拟面向对象全解（二、类型与赋值）

    上次，我讲了有关类型区别和传递的问题，现在，我给大家在插上一点有关类型赋值的问题。
    2011-07-07
  • layui前端框架之table表数据的刷新方法

    layui前端框架之table表数据的刷新方法

    今天小编就为大家分享一篇layui前端框架之table表数据的刷新方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JS前端解压zip的方法和技巧分享

    JS前端解压zip的方法和技巧分享

    这篇文章主要介绍了JS前端解压zip的方法和技巧,业务中有时候需要获取某个 zip 压缩包内的文件内容展示到前端,在 zip 包体积不是那么大的时候并且不涉及压缩包解密的时候,可以考虑纯前端方案,需要的朋友可以参考下
    2024-03-03

最新评论