一步一步教你寫帶圖片注釋的淡入淡出插件（四）
更新時間：2010年10月11日 22:16:03 作者：
第三部分的效果已經(jīng)基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項。廢話不多說了，還是繼續(xù)博文吧。
不出意外的話，這應(yīng)該是這個系列的最后一部分了。
第三部分的效果已經(jīng)基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項。廢話不多說了，還是繼續(xù)博文吧。
其實帶背景半透明的備注的輪播效果也是網(wǎng)上一抓一大把，163,qq，taobao等等，仔細找找應(yīng)該都能看到類似的效果。添加文本其實和前一文的添加控制器的方法差不多。無非也就是再append一個元素，在里面顯示文本即可。
/* -- 顯示備注 --*/
var alt = this.alt = document.createElement('p'); //添加一個p標(biāo)簽，用于顯示文本
this.img = [];
for(var k=0;k<this.l;k++){
this.img.push(H$$('img',this.li[k])[0]); //提取輪播模塊里的圖片，目的是取alt
}
.
.
.
wp.appendChild(alt); //
this.textH = nav_wp.offsetHeight;
alt.style.cssText = 'height:'+this.textH+'px;line-height:'+this.textH+'px;color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0;bottom:0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);'; //為這個層添加樣式
上面是init() 函數(shù)里添加的兩段代碼。都很易懂。就不細講了。另外。同樣要在變換函數(shù)里改變z-index值，讓控制器處于最高，文本層次之，同時再把alt文本寫入到這個文本層里面，如果需要滑動效果的話，在pos()里面把高度清0，在fade()里做高度變換即可（同樣也可以用top或left來做）；故pos()里改動代碼如下：
this.alt.style.zIndex = this.z+1;
nav_wp.style.zIndex = this.z+2;
.
this.alt.style.height = 0; //做備注層的滑動效果
.
this.alt.innerHTML = this.img[i].alt; //植入alt文本
如果文本層有高度變化效果的話，fade()里面加一句文本層的高度變化即可：
this.alt.style.height = Math.ceil(this.li[i].o*this.textH/100)+'px'; //做文字滑動效果
恩，這樣就差不多了。再看看最后的效果吧。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
恩，文章最后，差點忘了說一個很關(guān)鍵的點，就是options的配置參數(shù)：
在實例化 new Hongru.fader.init()的時候，第二個參數(shù)即為配置參數(shù)，是個對象，可選配置參數(shù)如下
{
id: //(必選)，輪播列表父元素id
auto: //(可選)自動播放時間間隔秒數(shù)
navClass: //(可選) 控制器className
curNavClass: //(可選) 控制器當(dāng)前狀態(tài)className
index: //(可選)初始化時從第幾個位置開始播放，默認為0,即第一個元素
}
好了，這一系列到此結(jié)束??！源碼大家可以自行更改
第三部分的效果已經(jīng)基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項。廢話不多說了，還是繼續(xù)博文吧。
其實帶背景半透明的備注的輪播效果也是網(wǎng)上一抓一大把，163,qq，taobao等等，仔細找找應(yīng)該都能看到類似的效果。添加文本其實和前一文的添加控制器的方法差不多。無非也就是再append一個元素，在里面顯示文本即可。
復(fù)制代碼 代碼如下:
/* -- 顯示備注 --*/
var alt = this.alt = document.createElement('p'); //添加一個p標(biāo)簽，用于顯示文本
this.img = [];
for(var k=0;k<this.l;k++){
this.img.push(H$$('img',this.li[k])[0]); //提取輪播模塊里的圖片，目的是取alt
}
.
.
.
wp.appendChild(alt); //
this.textH = nav_wp.offsetHeight;
alt.style.cssText = 'height:'+this.textH+'px;line-height:'+this.textH+'px;color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0;bottom:0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);'; //為這個層添加樣式
上面是init() 函數(shù)里添加的兩段代碼。都很易懂。就不細講了。另外。同樣要在變換函數(shù)里改變z-index值，讓控制器處于最高，文本層次之，同時再把alt文本寫入到這個文本層里面，如果需要滑動效果的話，在pos()里面把高度清0，在fade()里做高度變換即可（同樣也可以用top或left來做）；故pos()里改動代碼如下：
復(fù)制代碼 代碼如下:
this.alt.style.zIndex = this.z+1;
nav_wp.style.zIndex = this.z+2;
.
this.alt.style.height = 0; //做備注層的滑動效果
.
this.alt.innerHTML = this.img[i].alt; //植入alt文本
如果文本層有高度變化效果的話，fade()里面加一句文本層的高度變化即可：
復(fù)制代碼 代碼如下:
this.alt.style.height = Math.ceil(this.li[i].o*this.textH/100)+'px'; //做文字滑動效果
恩，這樣就差不多了。再看看最后的效果吧。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
恩，文章最后，差點忘了說一個很關(guān)鍵的點，就是options的配置參數(shù)：
在實例化 new Hongru.fader.init()的時候，第二個參數(shù)即為配置參數(shù)，是個對象，可選配置參數(shù)如下
{
id: //(必選)，輪播列表父元素id
auto: //(可選)自動播放時間間隔秒數(shù)
navClass: //(可選) 控制器className
curNavClass: //(可選) 控制器當(dāng)前狀態(tài)className
index: //(可選)初始化時從第幾個位置開始播放，默認為0,即第一個元素
}
好了，這一系列到此結(jié)束??！源碼大家可以自行更改
相關(guān)文章
JS使用正則表達式實現(xiàn)關(guān)鍵字替換加粗功能示例
這篇文章主要介紹了JS使用正則表達式實現(xiàn)關(guān)鍵字替換加粗功能,涉及javascript基本正則匹配與替換操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
出門在外，沒有核酸證明寸步難行，此文將教你如何通過小程序制作一個工具幫你在人生地不熟的情況如何迅速找到核酸檢測點，實現(xiàn)核酸點查詢、地圖導(dǎo)航、撥號等功能，需要的朋友可以參考下2022-10-10
本文是一個學(xué)習(xí)javascript的新手總結(jié)的一些關(guān)于javascript的方法，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要為大家詳細介紹了JS簡易計算器實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
JS遍歷JSON數(shù)組及獲取JSON數(shù)組長度操作示例【測試可用】
這篇文章主要介紹了JS遍歷JSON數(shù)組及獲取JSON數(shù)組長度操作,涉及javascript簡單json數(shù)組遍歷與運算相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)左右滾動電影畫布，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
Js將字符串轉(zhuǎn)換為特定的編碼，使其能夠被任意的計算機識別和讀取2010-05-05
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)九宮格拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要為大家詳細介紹了如何通過JavaScript實現(xiàn)粒子流動效果,文中的示例代碼講解詳細,具有一定的參考價值,感興趣的小伙伴可以參考一下2023-09-09
typescript中type和interface的區(qū)別有哪些
大家使用typescript總會使用到interface和type,所以下面這篇文章主要給大家介紹了關(guān)于typescript中type和interface區(qū)別的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-02-02