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

站长资源 2024/11/30 佚名

2 0 1

本文实例为大家分享了原生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="/UploadFiles/2021-04-02/jquery-1.2.6.js">

同样，这段代码是包含在$(function(){})中，相当于window.onload的作用。

之后$('a')获取a标签，其提供一个hover方法，这个方法里面要提供两个函数，一个移入一个移出，我们将其设定为移入时200ms增加到200px,移出时200ms收缩到120px.

animate即自定义动画的方法，在这里是设置宽度动态变化。

要在处理前用stop（），把上个动画清理掉。

效果是一样的，但代码量少。
以上就是本文的全部内容，希望对大家的学习有所帮助。

js,jquery,导航,菜单

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

2024年11月30日

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

两种js监听滚轮事件的实现方法

实例讲解Jquery中隐藏hide、显示show、切换toggle的用法

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

两种js监听滚轮事件的实现方法

实例讲解Jquery中隐藏hide、显示show、切换toggle的用法

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存