原生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 相关文章推荐
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
实例讲解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日历程序
2006/12/06 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
常用PHP框架功能对照表
2014/10/23 PHP
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
jquery中的$(document).ready()使用小结
2014/02/14 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
大学生职业生涯规划书范文
2014/01/14 职场文书
《陈毅探母》教学反思
2014/05/01 职场文书
护理心得体会范文
2016/01/22 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python