WordPress導(dǎo)航菜單的滾動(dòng)和淡入淡出效果的實(shí)現(xiàn)要點(diǎn)

更新時(shí)間：2015年12月14日 14:32:24 作者：吳釗

這篇文章主要介紹了WordPress導(dǎo)航菜單的滾動(dòng)和淡入淡出效果的實(shí)現(xiàn)要點(diǎn),講解了根據(jù)WordPress默認(rèn)主題的PHP編寫(xiě)技巧,需要的朋友可以參考下

滾動(dòng)導(dǎo)航菜單
滾動(dòng)菜單, 顧名思義是以滾動(dòng)的方式顯示和隱藏菜單的. 其實(shí)跟淡入淡出菜單和滾動(dòng)菜單的原理是一樣的, 前者是在觸發(fā)事件的時(shí)候改變菜單的透明度, 而后者則是改變菜單的高度. 那為什么后者的處理難度會(huì)比前者高呢? 這正因?yàn)椴藛胃叨鹊奶幚肀韧该鞫扔懈叩募记梢? 下面我們就討論一下該如何處理, 并難在什么地方.

初期化處理
為了處理更加靈活, 我們需要為它定義一個(gè)作為參數(shù)的滑動(dòng)速度, 也就是每一個(gè)單位時(shí)間間隔, 菜單高度的改變幅度. 另外, 我們需要將菜單的初始高度定為 0.

// 速度來(lái)自參數(shù), 默認(rèn)沒(méi)個(gè)時(shí)間單位移動(dòng) 10px
this.speed = speed || 10;
// 設(shè)定初始化高度
this.util.setStyle(this.body, 'height', '0');

展開(kāi)和折疊
展開(kāi)和折疊的方法對(duì)應(yīng)淡入淡出菜單的加強(qiáng)和減小不透明度, 只是處理對(duì)象不一樣, 原理是一樣的. 要注意將獲取的高度轉(zhuǎn)為整型再進(jìn)行計(jì)算.

expand: function() {
 // 獲取當(dāng)前高度, 并整型化
 var height = parseInt(this.util.getStyle(this.body, 'height'));
 // 在時(shí)間單位內(nèi)加上速度, 直到高度等于或超過(guò)最大高度
 height += this.speed;
 if(height >= this.height) {
 height = this.height;
 // 取消循環(huán)調(diào)用
 clearTimeout(this.tid);
 }
 // 重新設(shè)定菜單高度
 this.util.setStyle(this.body, 'height', height + 'px');
}
 
/**
 * 折疊菜單, 直到高度為 1 時(shí)隱藏菜單
 */
collapse:function() {
 // 獲取當(dāng)前高度, 并整型化
 var height = parseInt(this.util.getStyle(this.body, 'height'));
 // 在時(shí)間單位內(nèi)減去速度, 直到高度等于或小于 1
 height -= this.speed;
 if(height <= 1) {
 height = 1;
 // 隱藏菜單
 this.util.setStyle(this.body, 'visibility', 'hidden');
 // 取消循環(huán)調(diào)用
 clearTimeout(this.tid);
 }
 // 重新設(shè)定菜單高度
 this.util.setStyle(this.body, 'height', height + 'px');
}

激活菜單的瞬間
十分十分十分重要, 滾動(dòng)菜單中最具技巧, 也最有意思的一部分.
本程序中, 我對(duì)獲取高度的方法進(jìn)行了封裝, 獲取高度其實(shí)是返回元素的 offsetHeight. 按我的理解 (不知道是否正確), offsetHeight 會(huì)優(yōu)先去獲取 CSS 樣式中的高度并返回, 當(dāng)樣式為空時(shí)才會(huì)去獲取元素的實(shí)際高度. 所以有以下代碼:

// 獲得初始高度, 當(dāng)鼠標(biāo)在菜單標(biāo)題上時(shí)獲得展開(kāi)時(shí)的初始高度, 當(dāng)鼠標(biāo)在菜單體上時(shí)取得菜單的實(shí)際高度
var initHeight = this.util.getStyle(this.body, 'height');
// 獲得實(shí)際高度, 必須先清空樣式的高度, 否則只會(huì)得到樣式中的高度
this.util.setStyle(this.body, 'height', '');
this.height = this.util.getHeight(this.body);
// 重新設(shè)定初始高度
this.util.setStyle(this.body, 'height', initHeight);

淡出淡入導(dǎo)航菜單
實(shí)施操作

前面的分析說(shuō)得有點(diǎn)啰嗦了, 還是看看代碼吧. :) 為了突出改動(dòng)的部分, 我在代碼中加入了一些 Log.

初始化
初始不透明度為 0, 而最大不透明度為被設(shè)定值或者 1.

// 定義透明度, 默認(rèn)透明
this.opacity = 0;
this.maxopacity = opacity || 1;

激活
先進(jìn)行前期處理, 再對(duì)菜單的透明度進(jìn)行處理.

/**
 * 激活方法
 * 當(dāng)鼠標(biāo)移動(dòng)到菜單標(biāo)題是激活
 */
activate: function() {
 // 獲取當(dāng)前菜單體的位置
 var pos = this.util.cumulativeOffset(this.title);
 var left = pos[0];
 var top = pos[1] + this.util.getHeight(this.title);
 
 // 定義激活時(shí)樣式
 this.util.setStyle(this.body, 'left', left + 'px');
 this.util.setStyle(this.body, 'top', top + 'px');
 this.util.setStyle(this.body, 'visibility', 'visible');
 this.util.setStyle(this.body, 'opacity', this.opacity);
 this.util.setStyle(this.body, 'filter', 'alpha(opacity=' + this.opacity * 100 + ')');
 
 if(this.tid) {
 clearTimeout(this.tid);
 }
 // 不斷加強(qiáng)菜單的不透明度
 this.tid = setInterval(this.util.bind(this, this.appear), 30);
}

加強(qiáng)菜單的不透明度, 直到透明度到達(dá)最大不透明度.

/**
 * 加強(qiáng)不透明度, 直到最大不透明度
 */
appear: function() {
 this.opacity += 0.1;
 if(this.opacity >= this.maxopacity) {
 this.opacity = this.maxopacity;
 // 取消循環(huán)調(diào)用
 clearTimeout(this.tid);
 }
 // 重新設(shè)定透明度
 this.util.setStyle(this.body, 'opacity', this.opacity);
 this.util.setStyle(this.body, 'filter', 'alpha(opacity=' + this.opacity * 100 + ')');
}

解除
對(duì)菜單的透明度進(jìn)行處理.

/**
 * 解除方法
 * 當(dāng)鼠標(biāo)移動(dòng)出菜單標(biāo)題是激活
 */
deactivate: function(){
 if(this.tid) {
 clearTimeout(this.tid);
 }
 // 不斷減弱菜單的不透明度
 this.tid = setInterval(this.util.bind(this, this.fade), 30);
}

減弱菜單的不透明度, 直到透明度為 0 并隱藏菜單.

/**
 * 減小不透明度, 直到完全透明隱藏菜單
 */
fade:function() {
 this.opacity -= 0.1;
 if(this.opacity <= 0) {
 this.opacity = 0;
 // 隱藏菜單
 this.util.setStyle(this.body, 'visibility', 'hidden');
 // 取消循環(huán)調(diào)用
 clearTimeout(this.tid);
 }
 // 重新設(shè)定透明度
 this.util.setStyle(this.body, 'opacity', this.opacity);
 this.util.setStyle(this.body, 'filter', 'alpha(opacity=' + this.opacity * 100 + ')');
}

您可能感興趣的文章: