一步一步教你寫帶圖片注釋的淡入淡出插件（四）
更新時間：2010年10月11日 22:16:03 作者：
第三部分的效果已經(jīng)基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項(xiàng)。廢話不多說了，還是繼續(xù)博文吧。
不出意外的話，這應(yīng)該是這個系列的最后一部分了。
第三部分的效果已經(jīng)基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項(xiàng)。廢話不多說了，還是繼續(xù)博文吧。
其實(shí)帶背景半透明的備注的輪播效果也是網(wǎng)上一抓一大把，163,qq，taobao等等，仔細(xì)找找應(yīng)該都能看到類似的效果。添加文本其實(shí)和前一文的添加控制器的方法差不多。無非也就是再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ù)里添加的兩段代碼。都很易懂。就不細(xì)講了。另外。同樣要在變換函數(shù)里改變z-index值，讓控制器處于最高，文本層次之，同時再把a(bǔ)lt文本寫入到這個文本層里面，如果需要滑動效果的話，在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í)行]
恩，文章最后，差點(diǎn)忘了說一個很關(guān)鍵的點(diǎn)，就是options的配置參數(shù)：
在實(shí)例化 new Hongru.fader.init()的時候，第二個參數(shù)即為配置參數(shù)，是個對象，可選配置參數(shù)如下
{
id: //(必選)，輪播列表父元素id
auto: //(可選)自動播放時間間隔秒數(shù)
navClass: //(可選) 控制器className
curNavClass: //(可選) 控制器當(dāng)前狀態(tài)className
index: //(可選)初始化時從第幾個位置開始播放，默認(rèn)為0,即第一個元素
}
好了，這一系列到此結(jié)束?。≡创a大家可以自行更改
第三部分的效果已經(jīng)基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項(xiàng)。廢話不多說了，還是繼續(xù)博文吧。
其實(shí)帶背景半透明的備注的輪播效果也是網(wǎng)上一抓一大把，163,qq，taobao等等，仔細(xì)找找應(yīng)該都能看到類似的效果。添加文本其實(shí)和前一文的添加控制器的方法差不多。無非也就是再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ù)里添加的兩段代碼。都很易懂。就不細(xì)講了。另外。同樣要在變換函數(shù)里改變z-index值，讓控制器處于最高，文本層次之，同時再把a(bǔ)lt文本寫入到這個文本層里面，如果需要滑動效果的話，在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í)行]
恩，文章最后，差點(diǎn)忘了說一個很關(guān)鍵的點(diǎn)，就是options的配置參數(shù)：
在實(shí)例化 new Hongru.fader.init()的時候，第二個參數(shù)即為配置參數(shù)，是個對象，可選配置參數(shù)如下
{
id: //(必選)，輪播列表父元素id
auto: //(可選)自動播放時間間隔秒數(shù)
navClass: //(可選) 控制器className
curNavClass: //(可選) 控制器當(dāng)前狀態(tài)className
index: //(可選)初始化時從第幾個位置開始播放，默認(rèn)為0,即第一個元素
}
好了，這一系列到此結(jié)束?。≡创a大家可以自行更改
相關(guān)文章
js統(tǒng)計(jì)頁面的來訪次數(shù)實(shí)現(xiàn)代碼
這篇文章主要介紹了如何使用js統(tǒng)計(jì)頁面的來訪次數(shù),需要的朋友可以參考下2014-05-05
如何用js判斷當(dāng)前是否是企業(yè)微信環(huán)境還是微信環(huán)境
這篇文章主要給大家介紹了關(guān)于如何用js判斷當(dāng)前是否是企業(yè)微信環(huán)境還是微信環(huán)境的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2024-04-04
正則表達(dá)式在我們?nèi)粘痰墓ぷ黜?xiàng)目中,應(yīng)該是一個經(jīng)常用到的技能,在做一些字符的匹配和處理的過程中,發(fā)揮了很大的作用,這篇文章主要給大家介紹了關(guān)于js正則表達(dá)式常用方法的相關(guān)資料,需要的朋友可以參考下2024-05-05
使用javaScript實(shí)現(xiàn)鼠標(biāo)拖拽事件
這篇文章主要為大家詳細(xì)介紹了使用javaScript實(shí)現(xiàn)鼠標(biāo)拖拽事件的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了js函數(shù)和this用法,結(jié)合實(shí)例形式分析了js函數(shù)和this基本功能、原理、使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap導(dǎo)航條的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了JS 獲取瀏覽器和屏幕寬高等信息的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03
詳解搭建es6+devServer簡單開發(fā)環(huán)境
這篇文章主要介紹了詳解搭建es6+devServer簡單開發(fā)環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
JavaScript Promise.all 靜態(tài)方法常見問題記錄
Promise.all 是 JavaScript 中處理多個并發(fā)異步操作的強(qiáng)大工具,它不僅提高了程序的執(zhí)行效率,還提供了清晰的結(jié)果管理方式,本文給大家介紹JavaScript Promise.all 靜態(tài)方法常見問題記錄,感興趣的朋友一起看看吧2024-10-10
作為一名優(yōu)秀的接口調(diào)用工程師，對接口的返回信息進(jìn)行校驗(yàn)是必不可少的，本文整理的是一些常用的校驗(yàn)方式，希望能夠?qū)Υ蠹矣兴鶐椭?/div> 2023-05-05最新評論