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

2020-03-22 16:47:33

字體：大中小

供稿：網(wǎng)友

滾動導(dǎo)航菜單
滾動菜單, 顧名思義是以滾動的方式顯示和隱藏菜單的. 其實跟淡入淡出菜單和滾動菜單的原理是一樣的, 前者是在觸發(fā)事件的時候改變菜單的透明度, 而后者則是改變菜單的高度. 那為什么后者的處理難度會比前者高呢這正因為菜單高度的處理比透明度有更高的技巧要求. 下面我們就討論一下該如何處理, 并難在什么地方.初期化處理
為了處理更加靈活, 我們需要為它定義一個作為參數(shù)的滑動速度, 也就是每一個單位時間間隔, 菜單高度的改變幅度. 另外, 我們需要將菜單的初始高度定為 0.// 速度來自參數(shù), 默認(rèn)沒個時間單位移動 10pxthis.speed = speed || 10;// 設(shè)定初始化高度this.util.setStyle(this.body, 'height', '0');展開和折疊
展開和折疊的方法對應(yīng)淡入淡出菜單的加強(qiáng)和減小不透明度, 只是處理對象不一樣, 原理是一樣的. 要注意將獲取的高度轉(zhuǎn)為整型再進(jìn)行計算.expand: function() { // 獲取當(dāng)前高度, 并整型化 var height = parseInt(this.util.getStyle(this.body, 'height')); // 在時間單位內(nèi)加上速度, 直到高度等于或超過最大高度 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 時隱藏菜單collapse:function() { // 獲取當(dāng)前高度, 并整型化 var height = parseInt(this.util.getStyle(this.body, 'height')); // 在時間單位內(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');激活菜單的瞬間
十分十分十分重要, 滾動菜單中最具技巧, 也最有意思的一部分.
本程序中, 我對獲取高度的方法進(jìn)行了封裝, 獲取高度其實是返回元素的 offsetHeight. 按我的理解 (不知道是否正確), offsetHeight 會優(yōu)先去獲取 CSS 樣式中的高度并返回, 當(dāng)樣式為空時才會去獲取元素的實際高度. 所以有以下代碼:// 獲得初始高度, 當(dāng)鼠標(biāo)在菜單標(biāo)題上時獲得展開時的初始高度, 當(dāng)鼠標(biāo)在菜單體上時取得菜單的實際高度var initHeight = this.util.getStyle(this.body, 'height');// 獲得實際高度, 必須先清空樣式的高度, 否則只會得到樣式中的高度this.util.setStyle(this.body, 'height', '');this.height = this.util.getHeight(this.body);// 重新設(shè)定初始高度this.util.setStyle(this.body, 'height', initHeight);淡出淡入導(dǎo)航菜單
實施操作前面的分析說得有點(diǎn)啰嗦了, 還是看看代碼吧. :) 為了突出改動的部分, 我在代碼中加入了一些 Log.初始化
初始不透明度為 0, 而最大不透明度為被設(shè)定值或者 1.// 定義透明度, 默認(rèn)透明this.opacity = 0;this.maxopacity = opacity || 1;激活
先進(jìn)行前期處理, 再對菜單的透明度進(jìn)行處理. * 激活方法 * 當(dāng)鼠標(biāo)移動到菜單標(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); // 定義激活時樣式 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 + ')');解除
對菜單的透明度進(jìn)行處理. * 解除方法 * 當(dāng)鼠標(biāo)移動出菜單標(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 + ')');PHP教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：WordPress中編寫自定義存儲字段的相關(guān)PHP函數(shù)解析

下一篇：wordpress賬號密碼忘記了通過mysql數(shù)據(jù)庫修改方法（圖解）