原生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 相关文章推荐
jquery一般方法介绍 入门参考
Jun 21 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
Bootstrap CSS组件之输入框组
Dec 17 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
PHP 选项及相关信息函数库
2006/12/04 PHP
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php如何连接sql server
2015/10/16 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
微信小程序 MINA文件结构
2016/10/17 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
关于react-router的几种配置方式详解
2017/07/24 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
Python删除指定目录下过期文件的2个脚本分享
2014/04/10 Python
python自动格式化json文件的方法
2015/03/11 Python
解析Python中的异常处理
2015/04/28 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python实现动态创建类的方法分析
2019/06/25 Python
Django的models模型的具体使用
2019/07/15 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
中间件分为哪几类
2012/03/14 面试题
造价工程师个人求职信
2013/09/21 职场文书
留学推荐信怎么写
2014/01/25 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书