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


Posted in Javascript onMay 13, 2016

本文实例为大家分享了原生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>

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

下面用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(),把上个动画清理掉。
效果是一样的,但代码量少。

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

Javascript 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
js 内存释放问题
Apr 25 Javascript
javascript 模式设计之工厂模式详细说明
May 10 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
js漂浮广告实现代码
Aug 15 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
vue实现计算器功能
Feb 22 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 #Javascript
AngularJS在IE8的不支持的解决方法
May 13 #Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 #Javascript
JavaScript String 对象常用方法详解
May 13 #Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 #Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 #Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 #Javascript
You might like
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
js+canvas实现五子棋小游戏
2020/08/02 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
Python数据类型详解(二)列表
2016/05/08 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Python中collections模块的基本使用教程
2018/12/07 Python
Python函数调用追踪实现代码
2020/11/27 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
员工自我鉴定范文
2013/10/06 职场文书
三年级音乐教学反思
2014/01/28 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
会计演讲稿范文
2014/05/23 职场文书
投标服务承诺书
2014/05/28 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
2015年仓库管理工作总结
2015/05/25 职场文书
小学音乐课教学反思
2016/02/18 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android