这篇文章主要介绍了原生 js 和 jquery 分别实现横向导航菜单效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
原生 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>
来源: http://www.phperz.com/article/17/0330/265796.html