当前位置:首页 > CMS教程 > WordPress > 列表

WordPress导航菜单的滚动和淡入淡出效果的实现要点

发布:smiling 来源: PHP粉丝网  添加日期:2021-06-29 21:57:06 浏览: 评论:0 

这篇文章主要介绍了WordPress导航菜单的滚动和淡入淡出效果的实现要点,讲解了根据WordPress默认主题的PHP编写技巧,需要的朋友可以参考下。

滚动导航菜单

滚动菜单, 顾名思义是以滚动的方式显示和隐藏菜单的. 其实跟淡入淡出菜单和滚动菜单的原理是一样的, 前者是在触发事件的时候改变菜单的透明度, 而后者则是改变菜单的高度. 那为什么后者的处理难度会比前者高呢? 这正因为菜单高度的处理比透明度有更高的技巧要求. 下面我们就讨论一下该如何处理, 并难在什么地方.

初期化处理

为了处理更加灵活, 我们需要为它定义一个作为参数的滑动速度, 也就是每一个单位时间间隔, 菜单高度的改变幅度. 另外, 我们需要将菜单的初始高度定为 0.

速度来自参数, 默认没个时间单位移动 10px

this.speed = speed || 10;

设定初始化高度

this.util.setStyle(this.body, 'height', '0');

展开和折叠

展开和折叠的方法对应淡入淡出菜单的加强和减小不透明度, 只是处理对象不一样, 原理是一样的. 要注意将获取的高度转为整型再进行计算.

  1. expand: function() { 
  2.  // 获取当前高度, 并整型化 
  3.  var height = parseInt(this.util.getStyle(this.body, 'height')); 
  4.  // 在时间单位内加上速度, 直到高度等于或超过最大高度 
  5.  height += this.speed; 
  6.  if(height >= this.height) { 
  7.  height = this.height; 
  8.  // 取消循环调用 
  9.  clearTimeout(this.tid); 
  10.  } 
  11.  // 重新设定菜单高度 
  12.  this.util.setStyle(this.body, 'height', height + 'px'); 
  13.    
  14. /** 
  15.  * 折叠菜单, 直到高度为 1 时隐藏菜单 
  16.  */ 
  17. collapse:function() { 
  18.  // 获取当前高度, 并整型化 
  19.  var height = parseInt(this.util.getStyle(this.body, 'height')); 
  20.  // 在时间单位内减去速度, 直到高度等于或小于 1 
  21.  height -= this.speed; 
  22.  if(height <= 1) { 
  23.  height = 1; 
  24.  // 隐藏菜单 
  25.  this.util.setStyle(this.body, 'visibility''hidden'); 
  26.  // 取消循环调用 
  27.  clearTimeout(this.tid); 
  28.  } 
  29.  // 重新设定菜单高度 
  30.  this.util.setStyle(this.body, 'height', height + 'px'); 

激活菜单的瞬间

十分十分十分重要, 滚动菜单中最具技巧, 也最有意思的一部分.

本程序中, 我对获取高度的方法进行了封装, 获取高度其实是返回元素的 offsetHeight. 按我的理解 (不知道是否正确), offsetHeight 会优先去获取 CSS 样式中的高度并返回, 当样式为空时才会去获取元素的实际高度. 所以有以下代码:

  1. // 获得初始高度, 当鼠标在菜单标题上时获得展开时的初始高度, 当鼠标在菜单体上时取得菜单的实际高度 
  2. var initHeight = this.util.getStyle(this.body, 'height'); 
  3. // 获得实际高度, 必须先清空样式的高度, 否则只会得到样式中的高度 
  4. this.util.setStyle(this.body, 'height'''); 
  5. this.height = this.util.getHeight(this.body); 
  6. // 重新设定初始高度 
  7. this.util.setStyle(this.body, 'height', initHeight); 

淡出淡入导航菜单

实施操作

前面的分析说得有点啰嗦了, 还是看看代码吧. :) 为了突出改动的部分, 我在代码中加入了一些 Log.

初始化

初始不透明度为 0, 而最大不透明度为被设定值或者 1.

  1. // 定义透明度, 默认透明 
  2. this.opacity = 0; 
  3. this.maxopacity = opacity || 1; 

激活

先进行前期处理, 再对菜单的透明度进行处理.

  1. /** 
  2.  * 激活方法 
  3.  * 当鼠标移动到菜单标题是激活 
  4.  */ 
  5. activate: function() { 
  6.  // 获取当前菜单体的位置 
  7.  var pos = this.util.cumulativeOffset(this.title); 
  8.  var left = pos[0]; 
  9.  var top = pos[1] + this.util.getHeight(this.title); 
  10.    
  11.  // 定义激活时样式 
  12.  this.util.setStyle(this.body, 'left', left + 'px'); 
  13.  this.util.setStyle(this.body, 'top', top + 'px'); 
  14.  this.util.setStyle(this.body, 'visibility''visible'); 
  15.  this.util.setStyle(this.body, 'opacity'this.opacity); 
  16.  this.util.setStyle(this.body, 'filter''alpha(opacity=' + this.opacity * 100 + ')'); 
  17.    
  18.  if(this.tid) { 
  19.  clearTimeout(this.tid); 
  20.  } 
  21.  // 不断加强菜单的不透明度 
  22.  this.tid = setInterval(this.util.bind(thisthis.appear), 30); 

加强菜单的不透明度, 直到透明度到达最大不透明度.

  1. /** 
  2.  * 加强不透明度, 直到最大不透明度 
  3.  */ 
  4. appear: function() { 
  5.  this.opacity += 0.1; 
  6.  if(this.opacity >= this.maxopacity) { 
  7.  this.opacity = this.maxopacity; 
  8.  // 取消循环调用 
  9.  clearTimeout(this.tid); 
  10.  } 
  11.  // 重新设定透明度 
  12.  this.util.setStyle(this.body, 'opacity'this.opacity); 
  13.  this.util.setStyle(this.body, 'filter''alpha(opacity=' + this.opacity * 100 + ')'); 

解除

对菜单的透明度进行处理.

  1. /** 
  2.  * 解除方法 
  3.  * 当鼠标移动出菜单标题是激活 
  4.  */ 
  5. deactivate: function(){ 
  6.  if(this.tid) { 
  7.  clearTimeout(this.tid); 
  8.  } 
  9.  // 不断减弱菜单的不透明度 
  10.  this.tid = setInterval(this.util.bind(thisthis.fade), 30); 

减弱菜单的不透明度, 直到透明度为 0 并隐藏菜单.

  1. /** 
  2.  * 减小不透明度, 直到完全透明隐藏菜单 
  3.  */ 
  4. fade:function() { 
  5.  this.opacity -= 0.1; 
  6.  if(this.opacity <= 0) { 
  7.  this.opacity = 0; 
  8.  // 隐藏菜单 
  9.  this.util.setStyle(this.body, 'visibility''hidden'); 
  10.  // 取消循环调用 
  11.  clearTimeout(this.tid); 
  12.  } 
  13.  // 重新设定透明度 
  14.  this.util.setStyle(this.body, 'opacity'this.opacity); 
  15.  this.util.setStyle(this.body, 'filter''alpha(opacity=' + this.opacity * 100 + ')'); 
  16. }

Tags: WordPress导航菜单 WordPress滚动

分享到: