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

达到效果：

实现效果如下图所示

实施原则：

什么是筋斗云效应：

效果很简单，就是当鼠标移动到其他导航目录时，会有背景图片用鼠标滑动到当前目录。

实施思路：

当鼠标经过时，使用offsetLeft获取当前框向左的距离，并将该值分配给慢速动画的结束值。单击时记住当前的offsetLeft值，当鼠标经过时，将先前单击的offsetLeft值赋予当前的传递值。

实现代码：

以下是实现代码和详细说明。核心是设置一个位置绝对的span标签。通过绑定鼠标事件，利用封装的动画动画实现span的“筋斗云”效果。

！DOCTYPE htmlhtmlhead标题导航栏筋斗云效果/title metacarset=' utf-8 ' style type=' text/CSS ' * { padding : 0；margin : 0；} body { background-color : rgba(0，0，0，0.6)；} .box { width: 415pxheight: 42pxmargin: 200px汽车；背景-color : # fff；相对位置：} ul { list-style : none；相对位置：} li{左侧浮动：宽度： 83px；height: 42px文本对齐：中心；Font: 500 15px/42px '微软雅黑'；cursor:指针；} span { position: absoluteleft : 0；top : 0；宽度： 83px；height: 42px背景-image:线性-渐变(向右，#03c03c 50%，# 51ee 5d 100%)；}/style/head dydiv 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 '窗口。onload=function(){//Li鼠标放在哪个位置上，span对应到哪里去，然后移回原来的位置varliarr=document。getelementsbyname(' Li ')；var LiwIdth=LiaR[0]。offsetWidthvar span=document . getelementsbytagname(' span ')[0]；//计数器var CNT=0；//for循环绑定事件(var I=0；iliArr.lengthI ){ //自定义属性，然后将索引属性绑定到索引值liar[I]。索引=I；//鼠标进入事件liar[I]。onmouseover=function(){//但是span移动到索引值位置animate (span，this。索引* liwidth );}//将鼠标移离liar[I]。onmouseout=function () {//span到原始位置animate(span，CNT * liWidth)；}//单击活动LiaR[I]。onclick=function(){ //计数器记录当前标签索引值cnt=this.index动画(span，CNT * LiwIdth)；} }//减慢动画包函数动画(element，target){//清除间歇调用clearInterval(element . timer)；//设置超时调用元素。timer=set interval(function(){//设置步骤数varstep=(target-element。offset left)/10；//调整步数step=step 0？数学天花板(台阶):数学地板(台阶)；//设置style元素. style . left=element . offsetleftstep ' px '；//console . log(1)；if(Math . ABS(target-element . offsetleft)Math . ABS(step)){ element . style . left=target ' px '；clearInterval(element . timer)；} }, 20);} }/脚本/正文/html摘要

以上就是边肖介绍的实现精致个性导航栏筋斗云效果的JavaScript，希望对大家有所帮助！