快捷導(dǎo)航

一步一步教你寫帶圖片注釋的淡入淡出插件（四）

更新時(shí)間：2010年10月11日 22:16:03 作者：

第三部分的效果已經(jīng)基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項(xiàng)。廢話不多說了，還是繼續(xù)博文吧。

不出意外的話，這應(yīng)該是這個(gè)系列的最后一部分了。
　　第三部分的效果已經(jīng)基本上滿足大部分的需求了。所以這一部分呢，只能算是加分項(xiàng)。廢話不多說了，還是繼續(xù)博文吧。
　　其實(shí)帶背景半透明的備注的輪播效果也是網(wǎng)上一抓一大把，163,qq，taobao等等，仔細(xì)找找應(yīng)該都能看到類似的效果。添加文本其實(shí)和前一文的添加控制器的方法差不多。無非也就是再append一個(gè)元素，在里面顯示文本即可。

復(fù)制代碼代碼如下:

 
/* -- 顯示備注 --*/ 
var alt = this.alt = document.createElement('p'); //添加一個(gè)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);'; //為這個(gè)層添加樣式 

上面是init() 函數(shù)里添加的兩段代碼。都很易懂。就不細(xì)講了。另外。同樣要在變換函數(shù)里改變z-index值，讓控制器處于最高，文本層次之，同時(shí)再把a(bǔ)lt文本寫入到這個(gè)文本層里面，如果需要滑動(dòng)效果的話，在pos()里面把高度清0，在fade()里做高度變換即可（同樣也可以用top或left來做）；故pos()里改動(dòng)代碼如下：

復(fù)制代碼代碼如下:

 
this.alt.style.zIndex = this.z+1; 
nav_wp.style.zIndex = this.z+2; 
. 
this.alt.style.height = 0; //做備注層的滑動(dòng)效果 
. 
this.alt.innerHTML = this.img[i].alt; //植入alt文本 

如果文本層有高度變化效果的話，fade()里面加一句文本層的高度變化即可：

復(fù)制代碼代碼如下:

 
this.alt.style.height = Math.ceil(this.li[i].o*this.textH/100)+'px'; //做文字滑動(dòng)效果 

恩，這樣就差不多了。再看看最后的效果吧。

<!Doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>step4</title> <style type="text/css"></style>  </head> <body> <div   class="ublnpf9mb"   id="fader"> <ul> <li><img src="/upload/201010/20101011221558299.jpg" _mce_src="/upload/201010/20101011221558299.jpg" alt="我是圖片一" /></li> <li><img src="/upload/201010/20101011221558112.jpg" _mce_src="/upload/201010/20101011221558112.jpg" alt="哈哈，圖片二" /></li> <li><img src="/upload/201010/20101011221558758.jpg" _mce_src="/upload/201010/20101011221558758.jpg" alt="這是圖片三" /></li> <li><img src="/upload/201010/20101011221558158.jpg" _mce_src="/upload/201010/20101011221558158.jpg" alt="哈哈，圖片四" /></li> <li><img src="/upload/201010/20101011221558834.jpg" _mce_src="/upload/201010/20101011221558834.jpg" alt="圖片五來咯" /></li> </ul> </div>  </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

恩，文章最后，差點(diǎn)忘了說一個(gè)很關(guān)鍵的點(diǎn)，就是options的配置參數(shù)：
在實(shí)例化 new Hongru.fader.init()的時(shí)候，第二個(gè)參數(shù)即為配置參數(shù)，是個(gè)對(duì)象，可選配置參數(shù)如下
{
id: //(必選)，輪播列表父元素id
auto: //(可選)自動(dòng)播放時(shí)間間隔秒數(shù)
navClass: //(可選) 控制器className
curNavClass: //(可選) 控制器當(dāng)前狀態(tài)className
index: //(可選)初始化時(shí)從第幾個(gè)位置開始播放，默認(rèn)為0,即第一個(gè)元素
}
好了，這一系列到此結(jié)束??！源碼大家可以自行更改

您可能感興趣的文章: