制作仿“QQ秀”的虛擬形象

　　不知大家有沒有玩過QQ秀？玩過的話一定會想自己也做一個類似的功能不過沒有玩過也沒關系你可以看看下面的演示用戶可以在列出的圖片中自由定制自己的形象用在論壇社區留言本等地方的形象顯示可是個不錯的主意哦！怎麼樣？心動了吧？那讓我們看看這東西到底是怎麼回事吧

演示

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

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

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

　　<! 在要顯示形象預覽的地方放置以下這句代碼 >
<div id=bodyshow ></div>

　　<! 這是提交表單把代表用戶形象的字符串賦到隱藏域 userequip 提交 >
<form name=equipform method=post action=>
<input name=userequip type=hidden value=>
<input name=saveequip type=submit value=保存形象 >
<input name=toreequip type=button value=原始形象 onclick=shoiwit(df>df>df>);return false; >
</form>

　　<script language=JavaScript>
<!
var myequip=df>df>df>; //最初顯示的配置碼可由服務器讀取並輸出

　　function shoiwit(equip){ //這個函數由配置碼為參數顯示虛擬形象
showlayers=equipsplit(>); //以>為分隔符分配各層圖片名到一個數組 showlayers[]
str=;
for(i=;i<showlayerslength;i++){
if(showlayers[i]!=&&showlayers[i]!=){ //如果圖片名為或空值則該層不顯示
str+=<img src=equipment/+(i+)+/+showlayers[i]+gif style=padding:;position:absolute;top:;left:;width:;height:;zindex:+(i+)+;>;
}
}
//最後在最上一層覆蓋一幅完全透明的圖片這樣用戶在上面右鏈>另存為也只能保存這幅圖了
str+=<img src=equipment/blankgif style=padding:;position:absolute;top:;left:;width:;height:;zindex:;>;
if(equipformuserequip) equipformuserequipvalue=myequip=equip; //把配置碼賦值到隱藏域中
bodyshowinnerHTML=str; //顯示各層圖片
}
//頁面加載後先顯示最初的虛擬形象
documentbodyonload=new Function(shoiwit(myequip));

　　function dressit(layerimg){ //這個函數用於更換配置參數為 層數圖片名
showlayers=myequipsplit(>);
newequip=;
for(i=;i<showlayerslength;i++){
if(i+==layer){
if(img==showlayers[i]) newequip+=df; //如果該層已是這幅圖片則恢復為原始圖片
else newequip+=img; //否則換為這幅圖
}
else newequip+=showlayers[i]; //其他層圖片不變
if(i+!=showlayerslength) newequip+=>;
}
shoiwit(newequip); //顯示最新配置
}

　　>
</script>

　　<!
以下是供選圖片列表點擊一幅圖則更改相應的層的這幅圖片
注意鏈接路徑javascript:dressit() 表示第層換上/脫下圖片gif依此類推
不過要注意若要第層換上/脫下圖片dfgif則應加引號寫成 javascript:dressit(df)
>
<table border= cellspacing= cellpadding=>
<tr>
<td width=><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
<td width=><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
<td width=><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
<td width=><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
</tr>
<tr>
<td><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
<td><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
<td><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
<td><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
</tr>
<tr>
<td><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
<td><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
<td><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
<td><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
</tr>
<tr>
<td><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
<td><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
<td><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
<td><a javascript:dressit()><img src=equipment//xgif width= height= border=></a></td>
</tr>
</table>

　　 src=http://imgeducitycn/img_///gif width=> 點擊保存形象將向服務器提交配置碼變量userequip可用服務器端語言進行處理要在其他地方顯示該形象則可根據注釋選取上面代碼中的部分代碼就行了

有興趣的朋友可點擊這裡（注將和equipment打包供下載因為讀者看不到圖片放置格式）下載演示的源文件及圖片 END NNR Site Census V >

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19660.html