原生js和jquery分别实现横向导航菜单效果
本文实例为大家分享了原生js和jquery横向导航菜单的制作方法，供大家参考，具体内容如下
原生javascript实现：
这一次要实现的是鼠标放上去以后，菜单栏被选中的那一栏水平拉伸，鼠标离开后水平收缩。并带有一定的时间性，使肉眼能够看出其拉伸收缩的动画效果。
开始用javascript进行编写：
首先在之前水平方向的导航栏上进行操作，将第一栏和选中栏的样式只改变为背景变黑色，文字变白色
.on,a:hover{background:#000000;color:#FFFFFF;}
之后开始写javascript脚本：
<script>
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)
}
}
}
</script>
剖析一下这段代码：
第一层，window.onload，页面加载的时候调用这个函数。
第二层，for循环，用document.getElementsByTagName("a")获得导航栏数组，遍历为其添加第三层的效果。
第三层，一个onmouseover，一个onmouseout,分别实现鼠标覆盖和鼠标离开的效果。
第四层，setInterval和clearInterval方法，参数50ms.
第五层，核心部分，修改this.style.width，每次50ms加减8px,增加判断语句到达边界。
细节部分：采用先加减8px再进行判断，我认为应该倒过来，不必要先处理再判断，会浪费资源。还有就是在第三层开始后必须先清除时间机制，否则会容易出现重叠动画的紊乱状况。
最后实现的动画就是：鼠标放上去某一栏后，120px的菜单栏将每50ms伸长8px,直至到达200px停下；当鼠标离开后，该栏又将以50ms收缩8px的速度恢复到120px.
看一下总代码和效果图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏</title>
<style>
*{margin:0;padding:0;font-size:20px}
ul{list-style:none;height:50px;border-bottom:#000000 solid;padding-left:30px}
li{float:left;margin-top:20px;}
a{text-decoration:none;display:block;height:30px;line-height:30px;width:120px;margin-bottom:1px;background:#FFFFFF;color:#000000;text-align:center}
.on,a:hover{background:#000000;color:#FFFFFF;}
</style>
<script>
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)
}
}
}
</script>
</head>
<ul>
<li>
<a class="on" href="#">首 页</a>
</li>
<li> <a href="#">今日新闻</a></li>
<li><a href="#">周边故事</a></li>
<li><a href="#">天气预报</a></li>
<li><a href="#">好书推荐</a></li>
</ul>
</html>
下面用jquery实现同样的效果：
先下载一个jQurey1.2.6，引用到html中去
<script type="text/javascript" src="jquery-1.2.6.js"></script>
下载地址：Jquery1.2.6下载
[html] view plain copy print?
<script>
$(function(){
$('a').hover(
function(){
$(this).stop().animate({"width":"200px"},200 );},
function(){
$(this).stop().animate({"width":"120px"},200
);}
)
})
</script>
同样，这段代码是包含在$(function(){})中，相当于window.onload的作用。
之后$('a')获取a标签，其提供一个hover方法，这个方法里面要提供两个函数，一个移入一个移出，我们将其设定为移入时200ms增加到200px,移出时200ms收缩到120px.
animate即自定义动画的方法，在这里是设置宽度动态变化。
要在处理前用stop（），把上个动画清理掉。
效果是一样的，但代码量少。
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
这篇文章主要介绍了GitHub上一些实用的JavaScript的文件压缩解压缩库推荐,推荐的这几个都是支持zip格式的,需要的朋友可以参考下2016-03-03
在前端面试中,经常会问到这样的一个问题,删除字符串中指定字符,下面这篇文章主要给大家介绍了关于JavaScript删除字符串中指定字符的4种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
DOM元素都有一些标准事件，一般使用时只要使用onclick=function的方式就可以了，但是当需要为DOM元素添加多个事件，删除事件，或在用Javascript封装控件的时候，为封装的控件添加自定义事件的时候2012-05-05
这篇文章主要为大家详细介绍了js实现ajax的用户简单登入功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
今天小编就为大家分享一篇LayUI动态设置checkbox不显示的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了js下省份级联效果，需要的朋友可以参考一下2013-06-06
虽然小程序在刚推出时是不支持组件化的,但如今小程序开始支持自定义组件开发,下面这篇文章主要给大家介绍了关于微信小程序组件化开发的相关资料,需要的朋友可以参考下2023-03-03
下面小编就为大家带来一篇js中用cssText设置css样式的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这篇文章主要介绍了微信小程序点餐系统开发常见问题汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
DHTML 中的绝对定位...2006-11-11
最新评论