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

北大青鸟大学城校区logo 北大青鸟大学城校区
招生简章校园环境师资力量就业明星招生问答软件工程师北京大学学历学员项目联系我们 报名通道

免费在线咨询通道>>

免费在线报名通道>>

北大青鸟报名电话
当前位置:北大青鸟 > IT培训 > 软件开发 >

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

标签:   分类:软件开发

js和jquery分别实现横向导航菜单效果?看似容易懂,实际你懂吗?

  本文实例为大家分享了原生js和jquery横向导航菜单的制作方法,想学习的可以参考一下,具体内容如下:

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

  第一层,window.onload,页面加载的时候调用这个函数。

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

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

  第四层,setlnterval和clearInterval方法,参数50ms.

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

  下面用jquery实现同样的效果:

  先下载一个jQurey1.2.6,引用到html中去
下载地址:Jquery1.2.6下载 [html] view plain copy print?
同样,这段代码是包含在$(function{})中,相当于window.onload的作用。
之后$('a')获取a标签,其提供一个houvr方法,这个方法里面要提供两个函数,一个移入一个移出,我们将其设定为移入时200ms增加到200px,移出时200ms收缩到120px. animate即自定义动画的方法,在这里是设置宽度动态变化。 要在处理前用stop,把上个动画清理掉。 效果是一样的,但代码量少。
 
  学电脑,就来北大青鸟大学城校区,你的不二选择,15年沉淀教学,教材每18个月更新一次,资深导师指导你学习IT高端前沿技术,报名即签订就业协议,免费推荐工作,工作环境好,工作轻松,薪资高,这就是你想要的!了解课程详情可以咨询学校老师们!
课程咨询官网  http://www.91accp.com
课程咨询电话  余老师  15910633011   欢迎你的随时咨询了解
学校地址:北京市昌平区沙河沙阳路18号,北京科技职业学院内
乘车路线:乘坐北京地铁13号线到龙泽站下车,然后做公交车519路到老牛湾下车即到。
 

若有疑问请拨打北大青鸟咨询热线:010-80146691或点击免费在线咨询!
  • xml地图 网站地图 招生简章 合作企业 学员项目 联系我们
  • 关闭窗口