【前端】javascript实现导航栏筋斗云效果特效
实现效果：
实现效果如下图所示
实现原理：
什么是筋斗云效果：
- 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录。
实现思路：
- 鼠标经过的时候，利用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实现导航栏筋斗云效果特效的更多相关文章
- jquery 实现导航栏滑动效果
精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...
- day24—JavaScript实现导航栏底部引线跟随移动
转行学开发,代码100天——2018-04-09 前面的学习笔记中记录过,利用:before和:after实现导航栏鼠标移动跟随效果,今天通过JavaScript代码实现同样的效果,以作对比. < ...
- 通过html和css做出下拉导航栏的效果
通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...
- Flutter实战视频-移动电商-04.底部导航栏切换效果
04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart ...
- 手风琴图片和钢琴导航栏JQ滑动特效
手风琴JQ滑动特效 1.效果预览: 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> <me ...
- 前端css小米导航栏设置及盒子定位居中问题
1.小米最上部导航栏设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- MUI底部导航栏切换效果
首先是html代码: <nav class="mui-bar mui-bar-tab"> <a href="view/templates/home/ho ...
- html5 导航栏切换效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
随机推荐
- request.getParameter()获取URL中文参数乱码的解决办法
这个问题耽误好长时间,URL传中文参数出现乱码,就算首次使用request接收就添加 request.setCharacterEncoding("UTf-8"); 依然报错不误. ...
- Python跨目录调用模块
目的就是将脚本执行的根目录加入环境变量. #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = '人生入戏' import os,sy ...
- [Troubleshooting] Inter VT 主板已开启，但测试工具显示未开启.
一周前给神船Z7SL3重装了Win10的系统,但安装VMware时遇到了比较诡异的事 主板确定开启了VT 但是VMware显示不支持64位 用工具Securable和Intel(R) Process ...
- HDU2688-Rotate
Recently yifenfei face such a problem that give you millions of positive integers,tell how many pair ...
- angular之表单验证与ngMessages
刚接触angular1.x很多经常用到的ngMessages的地方,这里顺便记一下,效果如下图: 如果引用了angular-messages.js报如下错误,说明你的angular.js和angula ...
- java 线程一
java基础学习总结--线程(一) 一.线程的基本概念 线程理解:线程是一个程序里面不同的执行路径 每一个分支都叫做一个线程,main()叫做主分支,也叫主线程. 程只是一个静态的概念,机器上的一个. ...
- yum软件管理器，及yum源配置
说到yum源就必须说到linux系统中特有的依赖关系问题,yum就是为了解决依赖关系而存在的.yum源就相当是一个目录项,当我们使用yum机制安装软件时,若需要安装依赖软件,则yum机制就会根据在yu ...
- 分享基于分布式Http长连接框架--设计模型
追求简单的设计. 也许你的设计功能很强大,但能够在满足你需求的前提下尽量简单明了设计. 当你的设计过于复杂的时候想想是不是有其它路可以走,你站在别人的角度想下,如果别人看了你的设计会不会心领神会,还是 ...
- 实际开发--->php时间函数
当前日期(例:2017-10-04):date('Y-m-d',time()); 当前时间戳:strtotime(date('Y-m-d H-i-s',time()); 当前年月(例:2017-10) ...
- python采用 多进程/多线程/协程 写爬虫以及性能对比，牛逼的分分钟就将一个网站爬下来!
首先我们来了解下python中的进程,线程以及协程! 从计算机硬件角度: 计算机的核心是CPU,承担了所有的计算任务.一个CPU,在一个时间切片里只能运行一个程序. 从操作系统的角度: 进程和线程,都 ...