五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置: 365建站網(wǎng) > 365文章 > 【冰極峰教程系列之四】:九宮格應(yīng)用案例--極酷網(wǎng)頁(yè)播放器

【冰極峰教程系列之四】:九宮格應(yīng)用案例--極酷網(wǎng)頁(yè)播放器

文章來源:365jz.com     點(diǎn)擊數(shù):620    更新時(shí)間:2009-09-14 10:35   參與評(píng)論

原創(chuàng):冰極峰 轉(zhuǎn)載請(qǐng)注明出處 時(shí)間:2009年6月29日 8:42:38


冰極峰教程系列之一:九宮格基本布局

冰極峰教程系列之二:牢不可破的九宮格布局

冰極峰教程系列之三:三層分離的完美九宮格

冰極峰教程系列之四:九宮格應(yīng)用案例--極酷網(wǎng)頁(yè)播放器

冰極峰教程系列之五:無(wú)hack并支持透明圓角框的全兼容九宮格布局


 

在前面的三篇系列文章中,我對(duì)九宮格布局作了詳細(xì)的介紹。先從一個(gè)基本布局入手,將在制作過程中遇到的問題逐一進(jìn)行了講解。這三篇文章都是基本原理的講解,沒有一個(gè)有力的應(yīng)用案例來證明這種原理是否正確,可能有些朋友已經(jīng)有點(diǎn)急不可煩,也有網(wǎng)友要求我能提供案例。因此,在這一篇文章中,我將介紹一個(gè)九宮格案例極酷的播放器。

在我的第三篇文章《三層分離的完美九宮格》中,我介紹了用JS封裝html標(biāo)簽,以便于減少冗余的結(jié)構(gòu)體,但這種方式也是有缺陷的,如果用戶禁用了JS,將造成結(jié)構(gòu)完全顯示不出來,當(dāng)然對(duì)于當(dāng)今的上網(wǎng)條件來說,這應(yīng)該不是一個(gè)大問題,但縱觀國(guó)外的的一些網(wǎng)頁(yè)設(shè)計(jì),都是有這種考慮的必要的。這就需要優(yōu)雅降級(jí)和功能弱化,但這樣帶來的結(jié)果和不應(yīng)用JS封裝是一樣的。所以,魚和熊掌不可兼得也。哎,這些都是題外話,還是來看看我們的一個(gè)極酷播放器是如何設(shè)計(jì)出來的吧!

先入為主,大家都想先看看結(jié)果,好,先秀出截圖:

 

圖一

一般對(duì)于這樣一個(gè)有豐富色彩的播放器來說,都是要求其寬高值是可以動(dòng)態(tài)調(diào)整,因此這樣的圖形用九宮格來做是非常適合的選擇。

當(dāng)然原理我也不再重述了,請(qǐng)參考我的系列文章中的《牢不可破的九宮格布局》,這個(gè)應(yīng)用案例就是針對(duì)它來實(shí)現(xiàn)的。當(dāng)然在制作中還是有些技巧可以幫我們更好地的完成任務(wù)。比如css sprites技術(shù)(可以查看我的另一篇文章《css sprites圖片背景優(yōu)化技術(shù)》),它能有利地減少圖片的請(qǐng)求數(shù),一般對(duì)于九宮格布局的應(yīng)用來講,其圖片是比較多的,因?yàn)樗辽傩枰藦垐D片分別來裝飾四個(gè)角落和四條邊。所以怎樣減少圖片數(shù)量,對(duì)于設(shè)計(jì)人員來說是一件不得不考慮的事情。

在本例中我將四角的圖片合并成了一張圖片,它們看起應(yīng)該就是下面這個(gè)樣子:

 

圖二

在上圖中我為了讓大家看得仔細(xì)一點(diǎn),幾張圖片的交界處用輔助線畫了出來,我們應(yīng)用圖片定位原理將它們分別固定在四個(gè)角落上。它們?cè)跇邮奖碇惺侨缦路绞絹矶x的:

.t_l{ background:url(../image/round.gif) no-repeat left top;}/*左上角*/
.t_r
{background:url(../image/round.gif) no-repeat right top;}/*右上角*/
.b_l
{background:url(../image/round.gif) no-repeat left bottom;}/*左下角*/
.b_r
{ background:url(../image/round.gif) no-repeat right bottom;}/*右下角*/ 

我們?cè)賹⒆笥疫吙蚝喜⒊梢粡垐D片,如下圖所示:

 

圖三

左右邊框是需要縱向垂直平鋪的,所以一定要注意它們的寬度值,這需要精確定位:

.m_l{width:15px;background:url(../image/l_rborder.gif) repeat-y left top;} /*左邊框*/ 
.m_r
{ width:15px;background:url(../image/l_rborder.gif) repeat-y right top;} /*右邊框*/

對(duì)于上下邊框圖片,我們也采用合并的方法,有一點(diǎn)需要注意,這兩張圖片是一張很寬的圖片,其寬度值達(dá)到2000px,我是想讓它們能在更寬的屏幕上能夠通用,它們具有一個(gè)左右漸變的背景色,其中間色彩比兩側(cè)淺,所以我將兩側(cè)的背景進(jìn)行了延伸,這樣我可以用background-positioncenter值來進(jìn)行居中定位,就可以將圖片中間始終定位在容器的中間。

.t_m{background:url(../image/u_dborder.gif) no-repeat center top; }/*上邊框*/
.b_m_m
{background:url(../image/u_dborder.gif) no-repeat center bottom;} /*下邊框*/

在本案例中,比較煩雜的地方是底部區(qū)域中的一些控制按鈕,這個(gè)按鈕都是采用浮動(dòng),相對(duì)定位加絕對(duì)定位來進(jìn)行精確設(shè)置的。具體代碼就不一一列舉了,要了解詳情請(qǐng)查看源代碼。我只針對(duì)這里面的兩個(gè)拖動(dòng)欄的制作作一下說明。

我們可以看到在本案例中有兩個(gè)進(jìn)度欄,一個(gè)是進(jìn)度欄,一個(gè)是調(diào)整音量欄,其實(shí)它們的制作方法是一樣的。

其結(jié)構(gòu)是如下:

<div class="progressbar">
  
<div class="leftbar" id="progressbar">
    
<span class="rightbar" id="idBar">
      
<class="drawbar">進(jìn)度拖動(dòng)欄</b>
    
</span>
  
</div>
</div>

其樣式如下:

.progressbar{float:left;width:95%;height:5px;margin-top:3px;margin-bottom:5px; position:relative;}
.leftbar
{width:100%;height:5px;font-size:0%;background:url(../image/splitbar.gif) repeat-x left bottom;}
.rightbar
{float:right;width:50%;position:relative;height:5px;font-size:0%;background:url(../image/splitbar.gif) repeat-x left top;}
.drawbar
{display:block;width:11px;height:11px;position:absolute;top:-3px;left:0;background:url(../image/bar.gif) no-repeat left top;text-indent:-9999px;}

Leftbar這個(gè)div是左側(cè)綠色的進(jìn)度槽,它的寬度其實(shí)是100%,它在下面,它的上面是rightbar這個(gè)div,為了演示,我將它的寬度設(shè)置為50%,并將它設(shè)置為向右浮動(dòng),因?yàn)樗?/span>Leftbar的子容器,所以它會(huì)遮蓋住Leftbar的右邊50%的寬度,并將背景圖設(shè)置為一個(gè)灰色圖片,這樣就有了點(diǎn)進(jìn)度在50%的樣子了,然后我在rightbar中再加了一個(gè)子容器,它是用來加載那個(gè)綠色拖動(dòng)欄的小圖標(biāo)的。我們將它設(shè)置為絕對(duì)定位,讓它浮在rightbar這個(gè)父容器的上面,因?yàn)檫@個(gè)小圖標(biāo)的高度比rightbar高,所以將它向上偏移了3像素,讓它看起上下是垂直居中的樣子。這樣一個(gè)拖動(dòng)欄就算制作成功,當(dāng)然因?yàn)檫€沒有加入js功能的原因,所以目前它還不能拖動(dòng),為了以后js功能的完善,我在這兒為這兩個(gè)容器加入了一個(gè)ID,作為js代碼的鉤子。

至于音量進(jìn)度欄,其設(shè)置方式是一樣的,只是它少了一個(gè)拖動(dòng)圖片罷了。

然后我們?cè)俳o“全屏”和“寬屏”這兩個(gè)按鈕加入了一點(diǎn)js代碼,讓它能演示這種布局在寬高值變化時(shí)的狀態(tài)。

Ok,一個(gè)比較漂亮的播放器基本布局就算完成了,當(dāng)然它目前只是一個(gè)花架子,你可以加入播放功能來完善它。

本模型為了演示九宮格的強(qiáng)大自適應(yīng)功能,只對(duì)右下角的三個(gè)按鈕加入了js功能,你可以點(diǎn)擊這幾個(gè)按鈕來演示九宮格在寬高值放大的情況下的完美表現(xiàn)。

本模型在以下瀏覽器中測(cè)試通過:

IE6IE7、IE8FF3、TT、Maxthon2.1.5、Opera9.6Safari4.0、Chrome2.0。

點(diǎn)擊這兒下載本演示模型的壓縮包:下載Demo 

總結(jié):

本系列文章在這一篇后就暫時(shí)告一段落,塵埃落定之際,我們應(yīng)該反思一下,它的應(yīng)用是否就僅局限于此呢,NO!九宮格布局可以應(yīng)用的地方是很多的,比如現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)中,對(duì)于一個(gè)個(gè)區(qū)域版塊,我們都可以應(yīng)用它,這種布局設(shè)計(jì)特別適用于圖形設(shè)計(jì)要求比較高的地方。當(dāng)然對(duì)于這種布局的制作可能花費(fèi)的時(shí)間比一個(gè)普通的設(shè)計(jì)要多得多,針對(duì)具體環(huán)境具體運(yùn)用了。

后記:

本系列教程試圖通過由淺入深的方式將這種布局設(shè)計(jì)帶給大家,古人常說:授人以魚,不如授人以漁。希望大家能融會(huì)貫通,將它發(fā)揚(yáng)光大,當(dāng)然因本人水平有限,如果有講解不妥之處,敬請(qǐng)?jiān)?,也希望大家雅?/span>!

如果在本教程中有什么疑問,可以直接在我的博客上提出來,或電郵我。謝謝! 

冰極峰博客地址:http://www.cnblogs.com/binyong/ 

(本系列完)

如對(duì)本文有疑問,請(qǐng)?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會(huì)為你解答??! 點(diǎn)擊進(jìn)入論壇

發(fā)表評(píng)論 (620人查看,0條評(píng)論)
請(qǐng)自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī),嚴(yán)禁發(fā)布色情、暴力、反動(dòng)的言論。
昵稱:
最新評(píng)論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學(xué)習(xí)

業(yè)務(wù)咨詢

· 技術(shù)支持
· 服務(wù)時(shí)間:9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號(hào)