实现效果：

　　实现效果如下图所示

实现原理：

什么是筋斗云效果：

  • 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录。

实现思路：

  • 鼠标经过的时候，利用offsetLeft获得当前盒子距离左侧的距离，把这个值赋给缓动动画的end值。
  • 当点击的时候记住当前的offsetLeft值，当鼠标经过的时候把之前点击的offsetLeft给现在经过时候的值。

实现代码：

　　下面是实现代码以及详细注释，核心设置一个position为absolute的span标签，通过绑定鼠标事件，用封装好的animate动画实现span的“筋斗云”效果。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>导航栏筋斗云效果</title>
  5. 	<meta charset="utf-8">
  6. 	<style type="text/css">
  7. 		*{
  8. 			padding: 0;
  9. 			margin: 0;
  10. 		}
  11. 		body{
  12. 			background-color: rgba(0, 0, 0, 0.6);
  13. 		}
  14. 		.box{
  15. 			width: 415px;
  16. 			height: 42px;
  17. 			margin: 200px auto;
  18. 			background-color: #fff;
  19. 			position: relative;
  20. 		}
  21. 		ul{
  22. 			list-style: none;
  23. 			position: relative;
  24. 		}
  25. 		li{
  26. 			float: left;
  27. 			width: 83px;
  28. 			height: 42px;
  29. 			text-align: center;
  30. 			font: 500 15px/42px "微软雅黑";
  31. 			cursor: pointer;
  32. 		}
  33. 		span{
  34. 			position: absolute;
  35. 			left: 0;
  36. 			top: 0;
  37. 			width: 83px;
  38. 			height: 42px;
  39. 			background-image: linear-gradient(to right,#03c03c 50% ,#51ee5d 100%);
  40. 		}
  41. 	</style>
  42. </head>
  43. <body>
  44. <div class="box">
  45. 	<span></span>
  46. 	<ul>
  47. 		<li>菜单栏1</li>
  48. 		<li>菜单栏2</li>
  49. 		<li>菜单栏3</li>
  50. 		<li>菜单栏4</li>
  51. 		<li>菜单栏5</li>
  52. 	</ul>
  53. </div>
  54.  
  55. <script type="text/javascript">
  56. 	window.onload = function(){
  57. 		// 鼠标放在哪个li上面，span对应一道到哪里，移开后回到原位置
  58. 		var liArr = document.getElementsByTagName("li");
  59. 		var liWidth = liArr[0].offsetWidth;
  60. 		var span = document.getElementsByTagName("span")[0];
  61. 		// 计数器
  62. 		var cnt = 0;
  63.  
  64. 		// for循环绑定事件
  65. 		for(var i=0; i<liArr.length; i++){
  66. 			// 自定义属性，然后绑定index属性为索引值
  67. 			liArr[i].index = i;
  68. 			// 鼠标进入事件
  69. 			liArr[i].onmouseover = function(){
  70. 				// 然span运动到该li的索引值位置
  71. 				animate(span, this.index*liWidth);
  72. 			}
  73. 			// 鼠标移开
  74. 			liArr[i].onmouseout = function(){
  75. 				// span运动到原位置
  76. 				animate(span, cnt*liWidth);
  77. 			}
  78. 			// 点击事件
  79. 			liArr[i].onclick = function(){
  80. 				// 计数器记录当前标签索引值
  81. 				cnt = this.index;
  82. 				animate(span, cnt*liWidth);
  83. 			}
  84. 		}
  85.  
  86. 		// 缓动动画封装
  87. 		function animate(element, target){
  88. 			// 清除间歇调用
  89. 			clearInterval(element.timer);
  90. 			// 设置超时调用
  91. 			element.timer = setInterval(function(){
  92. 				// 设置步数
  93. 				var step = (target - element.offsetLeft)/10;
  94. 				// 调整步数
  95. 				step = step > 0 ? Math.ceil(step) : Math.floor(step);
  96. 				// 设置样式
  97. 				element.style.left = element.offsetLeft + step + "px";
  98. 				// console.log(1);
  99. 				if(Math.abs(target - element.offsetLeft) < Math.abs(step)){
  100. 					element.style.left = target + "px";
  101. 					clearInterval(element.timer);
  102. 				}
  103. 			}, 20);
  104. 		}
  105.  
  106. 	}
  107. </script>
  108. </body>
  109. </html>

　　

【前端】javascript实现导航栏筋斗云效果特效的更多相关文章

  1. jquery 实现导航栏滑动效果

    精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...

  2. day24—JavaScript实现导航栏底部引线跟随移动

    转行学开发,代码100天——2018-04-09 前面的学习笔记中记录过,利用:before和:after实现导航栏鼠标移动跟随效果,今天通过JavaScript代码实现同样的效果,以作对比. < ...

  3. 通过html和css做出下拉导航栏的效果

    通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...

  4. Flutter实战视频-移动电商-04.底部导航栏切换效果

    04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart ...

  5. 手风琴图片和钢琴导航栏JQ滑动特效

    手风琴JQ滑动特效 1.效果预览: 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. 前端css小米导航栏设置及盒子定位居中问题

    1.小米最上部导航栏设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. MUI底部导航栏切换效果

    首先是html代码: <nav class="mui-bar mui-bar-tab"> <a href="view/templates/home/ho ...

  8. html5 导航栏切换效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

随机推荐

  1. 在windows下安装flex和bison

    学习Stellar-core 需要依赖项flex .bison .gcc三个依赖项 下载得网址:链接: https://pan.baidu.com/s/1mitCLcs 密码: 3jaj   通过 w ...

  2. 2017年AR大会上海站干货分享

    怀着即兴奋又激动的心情,踏上了第二次去上海的高铁,全长约1400公里行驶6小时15分钟,不算漫长的6个多小时里,对于不长出差的我来说,可谓是一种煎熬,再加上晕车的毛病,在去高铁的路上已经渐渐发作,但好 ...

  3. Codeforce E. Fire

    E. Fire time limit per test 2 seconds memory limit per test 256 megabytes input standard input outpu ...

  4. 用Atom打造简单的java编译器以及对于可能出现的问题解答

    如何用Atom打造简单的javaIDE 自己一直比较喜欢Atom编辑器,前段时间给Atom配置好了C/C++的运行环境,自己心里还是感觉挺好的,最近在学习java ,偶然的机会让我看到了一篇文章,就是 ...

  5. bzoj3156 防御准备 - 斜率优化

    Input 第一行为一个整数N表示战线的总长度. 第二行N个整数,第i个整数表示在位置i放置守卫塔的花费Ai. Output 共一个整数,表示最小的战线花费值. Sample Input 102 3 ...

  6. 混合高斯模型（Mixtures of Gaussians）和EM算法

    这篇讨论使用期望最大化算法(Expectation-Maximization)来进行密度估计(density estimation). 与k-means一样,给定的训练样本是,我们将隐含类别标签用表示 ...

  7. 用python爬虫爬取去哪儿4500个热门景点，看看国庆不能去哪儿

    前言:本文建议有一定Python基础和前端(html,js)基础的盆友阅读. 金秋九月,丹桂飘香,在这秋高气爽,阳光灿烂的收获季节里,我们送走了一个个暑假余额耗尽哭着走向校园的孩籽们,又即将迎来一年一 ...

  8. javascript特效300例----抄书喽

    -javascript300例- #body_div { background-color: #202425; color: white; margin: 0 auto; border: 5px gr ...

  9. 【框架学习与探究之消息队列--EasyNetQ（1）】

    前言 本文欢迎转载,实属原创,本文原始链接地址:http://www.cnblogs.com/DjlNet/p/7603554.html 废话 既然都是废话了,所以大家就可以跳过了,这里是博主有事没事 ...

  10. GBK和UTF8有什么区别

    GBK编码:是指中国的中文字符,其它它包含了简体中文与繁体中文字符,另外还有一种字符“gb2312”,这种字符仅能存储简体中文字符. UTF-8编码:它是一种全国家通过的一种编码,如果你的网站涉及到多 ...