本文实例为大家分享了原生射流研究…和框架横向导航菜单的制作方法，供大家参考，具体内容如下

原生爪哇岛描述语言实现：这一次要实现的是鼠标放上去以后，菜单栏被选中的那一栏水平拉伸，鼠标离开后水平收缩。并带有一定的时间性，使肉眼能够看出其拉伸收缩的动画效果。开始用爪哇岛描述语言进行编写：首先在之前水平方向的导航栏上进行操作，将第一栏和选中栏的样式只改变为背景变黑色，文字变白色打开，悬停{背景： # 000000；color: # FFFFFF}

之后开始写爪哇岛描述语言脚本：

脚本窗口。onload=function(){ var A=document。getelementsbytagname(' A ')；for(var I=0；iA。长度；.onmouseover=function(){ clearInterval(this。时间)；var This=thisThis.time=setInterval(函数(){ if(this。offsetwithts=200){ clearInterval(这个。时间)；}这个。风格。宽度=这个。偏移量为8 ' px}，50) } A[i].onmouseout=function(){ clearInterval(this。时间)；var这=这。time=setInterval(函数(){ if(this。offsetwithts=120){ this。风格。宽度=' 120像素'；清除间隔(这个。时间)；}这个。风格。宽度=这个。offset with-8 ' px '；},50)} } }/脚本剖析一下这段代码：第一层，window.onload，页面加载的时候调用这个函数。第二层，用于循环，用文件。getelementsbytagname(' a ')获得导航栏数组，遍历为其添加第三层的效果。第三层，一个在mouseover，一个onmouseout，分别实现鼠标覆盖和鼠标离开的效果。第四层，设置间隔和clearInterval方法，参数50毫秒。第五层，核心部分，修改这个。样式。宽度，每次50毫秒加减8px，增加判断语句到达边界。细节部分：采用先加减8px再进行判断，我认为应该倒过来，不必要先处理再判断，会浪费资源。还有就是在第三层开始后必须先清除时间机制，否则会容易出现重叠动画的紊乱状况。最后实现的动画就是：鼠标放上去某一栏后，120像素的菜单栏将每50毫秒伸长8px，直至到达200像素停下；当鼠标离开后，该栏又将以50毫秒收缩8px的速度恢复到120像素。看一下总代码和效果图：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。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 33600；划水：0;font-size :20 px } ul { list-style : none；高度：50 px边框-底部：#000000实心；左填充left :30 px } Li { float : leftmargin-top :20 px；} a { text-decoration : none显示：块；高度：30 px线高：30 px宽度宽度：120像素边距-底部：1 px背景： # FFFFFFcolor: # 000000文本对齐：居中}。打开，悬停{背景： # 000000；color : # FFFFFF }/样式脚本窗户。onload=function(){ var A=document。getelementsbytagname(' A ')；for(var I=0；iA。长度；.onmouseover=function(){ clearInterval(this。时间)；var This=thisThis.time=setInterval(函数(){ if(this。offsetwithts=200){ clearInterval(这个。时间)；}这个。风格。宽度=这个。偏移量为8 ' px}，50) } A[i].onmouseout=function(){ clearInterval(this。时间)；var这=这。time=setInterval(函数(){ if(this。offsetwithts=120){ this。风格。宽度=' 120像素'；清除间隔(这个。时间)；}这个。风格。宽度=这个。offset with-8 ' px '；}，50)} } }/脚本/标题ul阿利class='on' href='# '首页/a /li阿利今日新闻/a/li lia href='# '周边故事/a/li lia href='# '天气预报/a/li lia href='# '好书推荐/a/Li/ul/html

下面用框架实现同样的效果：先下载一个jQurey1.2.6，引用到超文本标记语言中去

脚本类型=' text/JavaScript ' src=' http : jquery-1 . 2 . 6 . js '/脚本下载地址：Jquery1.2.6下载[html]查看纯文本打印？script $(function(){ $('a '))。悬停(function(){ $(this))。停止()。动画({'width':'200px'}，200)；}，function(){ $(this)。停止()。动画({'width':'120px'}，200)；}) }) /script同样，这段代码包含在$(function(){})中，相当于window.onload的函数，之后，$('a ')获取A标记，提供悬停方法。这个方法应该提供两个功能，一个移入，一个移出。我们设置为入住时200ms增加到200px，入住时200ms收缩到120 px。动画是一种自定义动画的方法。这里，我们设置宽度的动态变化。若要在处理前使用stop()，请清理最后一个动画。效果是一样的，只是代码量小。

以上就是本文的全部内容，希望对大家的学习有所帮助。