JavaScript实现精美个性导航栏筋斗云效果

时间：2021-05-26

实现效果：

　　实现效果如下图所示

实现原理：

什么是筋斗云效果：

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

实现思路：

•鼠标经过的时候，利用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实现精美个性导航栏筋斗云效果，希望对大家有所帮助！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章