原生js和jquery分别实现横向导航菜单效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了原生js和jquery分别实现横向导航菜单效果,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3873字,纯文字阅读大概需要6分钟。
内容图文
本文实例为大家分享了原生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(),把上个动画清理掉。
效果是一样的,但代码量少。
以上就是本文的全部内容,希望对大家的学习有所帮助。
内容总结
以上是互联网集市为您收集整理的原生js和jquery分别实现横向导航菜单效果全部内容,希望文章能够帮你解决原生js和jquery分别实现横向导航菜单效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。