关键词：
实现效果：
实现效果如下图所示
实现原理：
什么是筋斗云效果：
- 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录。
实现思路：
- 鼠标经过的时候，利用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>
导航栏筋斗云
css如下*{padding:0;margin:0;}body{background-color:rgba(0,0,0,0.6);}.box{width:415px;height:42px;margin:200pxauto;background-color:#fff;position:relative;}ul{list-style:none;position:relative;}li{float: 查看详情
css实现动画特效导航栏(代码片段)
...导航栏的一般写法，另一方面练习了CSS3的一些新特性。1实现效果 当鼠标划过时，实现了一种动态百叶窗效果。2实现细节2-0导航栏基本架构 首先复习导航栏的基本架构，导航栏的实现，采用的是ul-li的结构，为了能够实... 查看详情
前端特效-javascript实现购物页面图片放大效果
实现效果 实现代码:<!DOCTYPEhtml><html><head> <title>购物图片放大</title> <metacharset="utf-8"> <styletype="text/css"> *{ padding:0; margin:0; } .box{ width:20 查看详情
js如何实现点击导航栏后相应导航栏实现选中效果的切换
js如何实现点击导航栏后相应导航栏实现选中效果js特效已经写出来了，如果设置<ahref=“。。。。。。（调用java方法）”>，调用后页面自动刷新，选中效果始终在第一个上面，如果设置<ahref=“。。。。。。（调用java方法... 查看详情
javascript带有accordian效果的侧边栏导航循环(代码片段)
html实现导航栏效果
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>导肮栏</title>/*导航栏样式开始*/<style>ul{height:60px;list-style:none;}li{padding:15px;width:100px;display:inline- 查看详情
左侧竖条导航栏点击出现效果的实现(代码片段)
...较好看一些了，但是今天为大家介绍的是左侧竖条导航栏实现点击出现的效果，也就是刚开始只显示导航，不显示分类栏，而点击导航就可以显示分类栏了，下面一起来看下源代码的实现吧。<!DOCTYPEhtml><htmllang="en"&... 查看详情
动画特效三：搜索动画
...或许会感觉到奇怪。这个动画效果，用UIView的block动画，实现起来并不困难。但这并非本节讲述的重要。我这里的UI布局。是基于autolayout的 查看详情
导航栏渐变效果
因为项目需求，导航栏要实现渐变效果。当UIscrollView下拉到一定高度就让导航栏完全显示出来，中间过程则是导航栏背景由浅变深，也就是渐变效果。在网上看了一些资料，参考了一些代码，再结合自己的实践发现只要几行代码... 查看详情
rails javascript jquery：通过页面部分时导航栏标题中的粗体效果
】railsjavascriptjquery：通过页面部分时导航栏标题中的粗体效果【英文标题】：railsjavascriptjquery:boldeffectinnavbartitlewhenpassingoverapagesection【发布时间】：2021-04-0400:28:43【问题描述】：我有一个由6个不同部分组成的网页，以及一个带... 查看详情
导航栏下拉至一定高度后固定在顶部的特效
<scripttype="text/javascript">$(function(){varnav=$(".nav");//得到导航对象varwin=$(window);//得到窗口对象varsc=$(document);//得到document文档对象。win.scroll(function(){if(sc.scrollTop()>=100){nav.addClass("fix 查看详情
App Store排行榜页面导航栏效果如何实现
】AppStore排行榜页面导航栏效果如何实现【英文标题】：HowtoimplementtheNavigationBareffectofAppStorerankinglistpage【发布时间】：2017-01-1208:53:46【问题描述】：我使用以下代码增加NavigationBar高度overridefuncviewDidLayoutSubviews()setUpSegmentControll()le... 查看详情
css实现导航栏下划线跟随效果
话不多说先附上代码<style>ulli{float:left;display:block;list-style:none;margin-left:20px;border-bottom:2pxblacksolid;position:relative;}ulli::before{content:"";position:absolute;top:0;left:100%;width:0;he 查看详情
仿知乎/途家导航栏渐变文字动画效果-b
...图片效果5.title文字动画效果通过简单分析,系统的导航栏实现以上效果有点困难,直接自定义一个假的导航栏更容易点分布拆解实现以上效果一.下拉放大header图片-(vo 查看详情
html+javascript实现链式运动特效
在学习js的过程中，发现这家伙做特效真是不错，尽管说眼下水平还不够，只是也能写点简单的效果。今天分享一个简单的运动框架。然后利用这个框架实现简单的链式运动特效。1.move.js在运动框架中。主要进行长宽变化和透明... 查看详情
jquery实现简单的导航栏切换效果($(this).index)
一个简单的导航栏切换效果的制作,主要通过索引值和jquery的siblings()来实现 html代码：<divclass="container"><ulclass="top-nav"><liclass="nav">html</li><liclass="nav">css</li><liclass="nav"& 查看详情
手风琴图片和钢琴导航栏jq滑动特效(代码片段)
手风琴JQ滑动特效1.效果预览:2.相关代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="../jquery-1.9.1/jquery-1. 查看详情
如何在导航栏菜单中实现平滑的向下滑动效果
】如何在导航栏菜单中实现平滑的向下滑动效果【英文标题】：HowtoachievesmootheslidedowneffectinNavbarMenu【发布时间】：2018-03-2404:43:24【问题描述】：目标-我想在一些滚动后实现向下滑动（用于导航栏）效果。我实际上实现了我想要... 查看详情