這篇文章主要介紹了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. /** 
16.  * 折疊菜單, 直到高度為 1 時隱藏菜單 
17.  */ 
18. collapse:function() { 
19.  // 獲取當前高度, 并整型化 
20.  var height = parseInt(this.util.getStyle(this.body, 'height')); 
21.  // 在時間單位內減去速度, 直到高度等于或小于 1 
22.  height -= this.speed; 
23.  if(height <= 1) { 
24.  height = 1; 
25.  // 隱藏菜單 
26.  this.util.setStyle(this.body, 'visibility', 'hidden'); 
27.  // 取消循環調用 
28.  clearTimeout(this.tid); 
29.  } 
30.  // 重新設定菜單高度 
31.  this.util.setStyle(this.body, 'height', height + 'px'); 
32. } 

激活菜單的瞬間

十分十分十分重要, 滾動菜單中最具技巧, 也最有意思的一部分.

本程序中, 我對獲取高度的方法進行了封裝, 獲取高度其實是返回元素的 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(this, this.appear), 30); 
23. } 

加強菜單的不透明度, 直到透明度到達最大不透明度.

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 + ')'); 
14. } 

解除

對菜單的透明度進行處理.

1. /** 
2.  * 解除方法 
3.  * 當鼠標移動出菜單標題是激活 
4.  */ 
5. deactivate: function(){ 
6.  if(this.tid) { 
7.  clearTimeout(this.tid); 
8.  } 
9.  // 不斷減弱菜單的不透明度 
10.  this.tid = setInterval(this.util.bind(this, this.fade), 30); 
11. } 

減弱菜單的不透明度, 直到透明度為 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. }