DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 制作仿“QQ秀”的虛擬形象
制作仿“QQ秀”的虛擬形象
編輯:關於JavaScript     
不知大家有沒有玩過“QQ秀”?玩過的話一定會想自己也做一個類似的功能。不過沒有玩過也沒關系,你可以看看下面的演示。用戶可以在列出的圖片中自由定制自己的形象,用在論壇社區、留言本等地方的形象顯示可是個不錯的主意哦!怎麼樣?心動了吧?那讓我們看看這東西到底是怎麼回事吧!
演示:


實際上,左邊“形象預覽”的形象是由多幅圖片一層一層拼成的,呵呵,了解Photoshop的層技術就很容易理解了。每層圖片的大小一樣,必要顯示的地方都調整在特定范圍,其他地方都是透明的。在換形象時,只要把相應層的圖片替換掉就可以了。不難理解,演示中只有20幅用於拼湊形象的圖片(原始的形象有4幅),卻可以拼出54=625個形象!

我們用一個特定格式的字符串來記錄用戶的形象配置,也是根據該字符串來顯示虛擬形象,該字符串暫且稱為配置碼。存取形象時,就存取該配置碼即可。因為這十分簡單,所以這裡不討論服務器端語言的操作。配置碼的格式舉個例子就容易明白,例如“df>2>1>0”表示第一層圖片名為“df.gif”,第二層名為“2.gif”,第三層名為“1.gif”,沒有第四層。所以不要給圖片起名為“0.gif”。

下面我們看看虛擬形象具體是如何實現的。演示中用了四層拼湊一個形象(其際上您可以用更用層):第一層褲子,第二層上衣,第三層發型,第四層帽子。各層供選圖片都放在各自的目錄中,目錄名分別為1、、2、3、4,即和層數相同。另外列表中的圖片和拼湊形象的圖片不相同,列表中的只是縮略圖。大圖“1.gif”對應的縮略圖是“1x.gif”,依此類推。另外每個目錄都有一個圖片“df.gif”,是該層的默認原始圖片。
照此這安置好圖片後,開始編寫代碼,為了便於理解,以下代碼的順序並不完全按照演示中的順序:



點擊“保存形象”將向服務器提交配置碼變量“userequip”,可用服務器端語言進行處理。要在其他地方顯示該形象,則可根據注釋選取上面代碼中的部分代碼就行了。

有興趣的朋友可點擊這裡(注:將example.htm和equipment打包供下載,因為讀者看不到圖片放置格式)下載演示的源文件及圖片。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved