原生js和jquery分别实现横向导航菜单效果

@H_502_0@本文实例为大家分享了原生js和jquery横向导航菜单的制作方法，供大家参考，具体内容如下

@H_502_0@

原生javascript实现：

这一次要实现的是鼠标放上去以后，菜单栏被选中的那一栏水平拉伸，鼠标离开后水平收缩。并带有一定的时间性，使肉眼能够看出其拉伸收缩的动画效果。
开始用javascript进行编写：
首先在之前水平方向的导航栏上进行操作，将第一栏和选中栏的样式只改变为背景变黑色，文字变白色
.<span style="color: #800000">on,a:hover{background:#000000;color:#FFFFFF;}

@H_502_0@之后开始写javascript脚本：

window.onload=function(){ var A=document.getElementsByTagName("a");

for(var i=0;i<A.length;i++)
{
A[i].onmouseover=function(){
clearInterval(this.time);
var This=this;
This.time=setInterval(function(){

if(This.offsetWidth>=200)
{
clearInterval(This.time);
}
This.style.width=This.offsetWidth+8+"px";

},50)
}

A[i].onmouseout=function(){
clearInterval(this.time);
var This=this;
This.time=setInterval(function(){
if(This.offsetWidth<=120)
{
This.style.width="120px";
clearInterval(This.time);
}
This.style.width=This.offsetWidth-8+"px";

},50)
}

}

剖析一下这段代码：

第一层，

window.onload，页面加载的时候调用这个函数。

第二层，

for循环，用document.getElementsByTagName("a")获得导航栏数组，遍历为其添加第三层的效果。

第三层，

一个onmouseover，一个onmouseout,分别实现鼠标覆盖和鼠标离开的效果。

第四层，

setInterval和clearInterval方法，参数50ms.

第五层，

核心部分，修改this.style.width，每次50ms加减8px,增加判断语句到达边界。细节部分：采用先加减8px再进行判断，我认为应该倒过来，不必要先处理再判断，会浪费资源。还有就是在第三层开始后必须先清除时间机制，否则会容易出现重叠动画的紊乱状况。最后实现的动画就是：鼠标放上去某一栏后，120px的菜单栏将每50ms伸长8px,直至到达200px停下；当鼠标离开后，该栏又将以50ms收缩8px的速度恢复到120px. 看一下总代码和效果图：

导航栏