【前端】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>

转载于:https://www.cnblogs.com/dragonir/p/7750382.html

【前端】javascript实现导航栏筋斗云效果特效相关推荐

css筋斗云,JavaScript实现精美个性导航栏筋斗云效果
实现效果: 实现效果如下图所示实现原理: 什么是筋斗云效果: •这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: •鼠标经过的时候,利用offsetLef ...
JS实现动画特效2（缓动函数封装、导航栏筋斗云效果）
JS实现的动画特效:手风琴特效展示图片.筋斗云动画一.小知识 1.浏览器的offsetLeft是就近取整,要实现向上取整或向下取整,可以调用Math.ceil()或Math.floor() 2.想要 ...
css中侧边导航栏怎么隐藏,CSS3手机侧边导航栏滑动隐藏特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: 共4种CSS3手机侧边导航栏滑动隐藏特效 1.默认的点击滑动侧边栏菜单效果. 2.带3D transforms的滑 ...
android viewpager标题,ViewPager顶部导航栏联动效果(标题栏条目多)
如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下: 其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题,加了几个图片,最重要的是给Tab ...
前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 *{ margin: 0; padding: 0; } .navScroll{ position: relative; ...
用CSS3如何实现钟摆动画的导航栏菜单效果
我们都知道,CSS3可以实现很多很酷的动画效果,而今天我们将与大家分享一期用CSS3制作的钟摆动画菜单效果,在这个动画中,我们主要采用CSS3来控制SVG图标的左右摆动效果. 首先,我们需要在HTML ...
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS
跟着尚硅谷老师的练习,记录一下自己做的内容,查漏补缺. 目录一.京东左侧导航栏 1.第一次自己做的代码(未看老师讲解视频前做的): 总结: 2.看完老师视频后跟着写的代码: 注意点及总结删除行内元 ...
导航栏样式HTML,[JavaScript 实例] 导航栏几种常见样式
这里记录下导航栏几种常见的样式,仅供大家参考. 导航栏1 (原生 JS 代码) 比较常见也比较简单的导航栏 ,用的 JavaScript 原生代码,大致思路是通过改变 li 元素的 className ...

【前端】javascript实现导航栏筋斗云效果特效

【前端】javascript实现导航栏筋斗云效果特效相关推荐

最新文章

热门文章