实现效果：

　　实现效果如下图所示

实现原理：

什么是筋斗云效果：

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

实现思路：

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

实现代码：

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

<!DOCTYPE html>

<html>

<head>

	<title>导航栏筋斗云效果</title>

	<meta charset="utf-8">

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		body{

			background-color: rgba(0, 0, 0, 0.6);

		}

		.box{

			width: 415px;

			height: 42px;

			margin: 200px auto;

			background-color: #fff;

			position: relative;

		}

		ul{

			list-style: none;

			position: relative;

		}

		li{

			float: left;

			width: 83px;

			height: 42px;

			text-align: center;

			font: 500 15px/42px "微软雅黑";

			cursor: pointer;

		}

		span{

			position: absolute;

			left: 0;

			top: 0;

			width: 83px;

			height: 42px;

			background-image: linear-gradient(to right,#03c03c 50% ,#51ee5d 100%);

		}

	</style>

</head>

<body>

<div class="box">

	<span></span>

	<ul>

		<li>菜单栏1</li>

		<li>菜单栏2</li>

		<li>菜单栏3</li>

		<li>菜单栏4</li>

		<li>菜单栏5</li>

	</ul>

</div>

<script type="text/javascript">

	window.onload = function(){

		// 鼠标放在哪个li上面，span对应一道到哪里，移开后回到原位置

		var liArr = document.getElementsByTagName("li");

		var liWidth = liArr[0].offsetWidth;

		var span = document.getElementsByTagName("span")[0];

		// 计数器

		var cnt = 0;

		// for循环绑定事件

		for(var i=0; i<liArr.length; i++){

			// 自定义属性，然后绑定index属性为索引值

			liArr[i].index = i;

			// 鼠标进入事件

			liArr[i].onmouseover = function(){

				// 然span运动到该li的索引值位置

				animate(span, this.index*liWidth);

			}

			// 鼠标移开

			liArr[i].onmouseout = function(){

				// span运动到原位置

				animate(span, cnt*liWidth);

			}

			// 点击事件

			liArr[i].onclick = function(){

				// 计数器记录当前标签索引值

				cnt = this.index;

				animate(span, cnt*liWidth);

			}

		}

		// 缓动动画封装

		function animate(element, target){

			// 清除间歇调用

			clearInterval(element.timer);

			// 设置超时调用

			element.timer = setInterval(function(){

				// 设置步数

				var step = (target - element.offsetLeft)/10;

				// 调整步数

				step = step > 0 ? Math.ceil(step) : Math.floor(step);

				// 设置样式

				element.style.left = element.offsetLeft + step + "px";

				// console.log(1);

				if(Math.abs(target - element.offsetLeft) < Math.abs(step)){

					element.style.left = target + "px";

					clearInterval(element.timer);

				}

			}, 20);

		}

	}

</script>

</body>

</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. find命令基础讲解

    目录 前言 find命令 查找条件 指定搜索层级 根据文件名和inode查找 根据属名属主查找 根据文件类型查找 组合条件 根据文件大小查找 根据时间戳查找 根据权限查找 动作处理 参数替换xargs ...

  2. Manacher详解

    之前的字符串题解中对Manacher的思想进行了简略的介绍,在这篇文章中,我将会详细的将这个算法的初衷和具体实现理论进行解释.声明一点,这是我个人的理解,可能有不全面之处,望多包涵.在之前的几篇文章中 ...

  3. session写入memcache

    1 <?php 2 class MemSession{ 3 private static $handler = null; 4 private static $lifetime = null; ...

  4. Java 制作证书的工具keytool用法总结

    一.keytool的概念 keytool 是个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认证自己)或数据完整性以及认证服务.在 ...

  5. BigDecimal的加减乘除及比较大小

    import java.math.BigDecimal; import static java.lang.System.out; public class BaseClass { public sta ...

  6. es6函数的rest参数和拓展运算符(...)的解析

    es6的新特性对函数的功能新增加了rest参数和...的拓展运算符.这是两个什么东西呢? 先来看一个问题:如何获取一个函数除了定义的参数之外的其他参数?传统的做法是借助函数的arguments关键字来 ...

  7. R语言画曲线图

    本文以1950年到2010年期间我国的火灾统计数据为例,数据如下所示: (0)加载数据 data<-read.csv("E:\\MyDocument\\p\\Data\\1950~20 ...

  8. CentOS 搭建Graylog集群详解

    1. Graylog2 简介 Graylog 是一个简单易用.功能较全面的日志管理工具,相比 ELK 组合, 优点: 部署维护简单,一体化解决方案,不像ELK三个独立系统集成. 查相比ES json语 ...

  9. 一张图理清ASP.NET Core启动流程

    1. 引言 对于ASP.NET Core应用程序来说,我们要记住非常重要的一点是:其本质上是一个独立的控制台应用,它并不是必需在IIS内部托管且并不需要IIS来启动运行(而这正是ASP.NET Cor ...

  10. jdk8与jdk9的共存

    以前安装JDK,需要手动配置环境变量.JDK8多了自动配置环境变量,所以可以不用手动配置. 如果我已经装了JDK8,还想再装一个JDK9,安装完,自动配置的环境变量会指向JDK9版本. 解决方法 删除 ...