这篇文章主要介绍了原生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 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（），把上个动画清理掉。
效果是一样的，但代码量少。
以上就是本文的全部内容，希望对大家的学习有所帮助。
- 2014年临沂市河东区招聘卫生类护理学进入面试资格审查范围人员名单
- 2014年广安市事业单位招聘工作人员的职位调整公告
- 2014年度山东省厅直属事业单位初级岗位招聘资格审查的通知
- 日照市山海天旅游度假区2014年卫生专业技术人员及市场监督协管员招聘面试总成绩
- 2014年南平市市属事业单位招聘笔面试成绩合格进入体检名单公示（第12场）
- 定向审核材料
- 报考曲靖事业单位招聘要求未就业，现在就业了，考上再辞职可以不？
- 云南省定向事业单位报名数据？
- 云南定向事业单位面试地点咨询
- 报名了有事情没去
- 西山区教师面试问题
- 富源县人工审核
- 2014年保山市事业单位公开招聘人员报名结果公告
- 2014年保山市事业单位招聘调剂后各岗位报名情况表
- 昆明市安宁市2014年其他事业单位及卫生系统招聘综合成绩公示
- 昆明市安宁市2014年事业单位招聘综合成绩表（卫生系统）
- 昆明市安宁市2014年事业单位招聘综合成绩表（其他事业单位）
- 2014年事业单位资格复审工作的时间？
- 定向事业考试咨询（云南省临沧市）
- 2014年定向招聘2009年的村官要不要填备注1这项？
- 2014云南省事业单位定向招聘不用交费吗？
- 昆明寻甸县的事业单位报考内容填写问题？
- 定向事业单位最终报名人数？
- 关于曲靖事业单位报名已经截止人数为什么会增加
- 急急急！如果现在审核不通过，还可以修改吗？
- net-worth
- net wt.
- net-wt
- net yield
- net-yield
- net zero
- net-zero
- Neufchatel
- neural
- neural activity
- 闭口捕舌
- 闭口结舌
- 闭口藏舌
- 闭境自守
- 闭壁清野
- 闭明塞聪
- 闭月羞花
- 闭目塞听
- 闭目塞耳
- 闭门却扫
- 交通安全出行宣传标语口号80句
- 生产材料质量的宣传语口号精选
- 店面宣传语3篇
- 全国土地日宣传条幅
- 节约用电宣传语110句
- 公司宣传语3篇精选
- 校园学生文明交通教育宣传语
- 全国爱眼日主题标语
- 企业安全生产的宣传语
- 最新国际禁毒日宣传语