复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>仿QQ秀换装效果</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style>
#cs img{cursor:hand}
</style>
<base href="https://www.zzsky.cn/effect/images/qqshow/">
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<!-- 在要显示形象预览的地方放置以下这句代码 -->
<div></div>
<!-- 这是提交表单，把代表用户形象的字符串赋到隐藏域 userequip 提交 -->
<form method="post" action="">
<input type="hidden" value="">
<input type="submit" value="保存形象" >
<input type="button" value="原始形象" >
</form>
<script language="JavaScript">
<!--
var myequip="df>df>df>0"; //最初显示的配置码，可由服务器读取并输出。
function shoiwit(equip){ //这个函数由配置码为参数，显示虚拟形象
showlayers=equip.split('>'); //以“>”为分隔符，分配各层图片名到一个数组 showlayers[]
str="";
for(i=0;i<showlayers.length;i++){
if(showlayers[i]!='0'&&showlayers[i]!=''){ //如果图片名为0或空值则该层不显示。
str+="<img src='"https://www.jb51.net/+(i+1)+"https://www.jb51.net/"+showlayers[i]+".gif'>";
}
}
//最后在最上一层覆盖一幅完全透明的图片，这样用户在上面右链>另存为也只能保存这幅图了：
str+="<img src='https://www.jb51.net/blank.gif'>";
if(equipform.userequip) equipform.userequip.value=myequip=equip; //把配置码赋值到隐藏域中
bodyshow.innerHTML=str; //显示各层图片。
}
//页面加载后先显示最初的虚拟形象：
document.body.onload=new Function("shoiwit(myequip)");
function dressit(layer,img){ //这个函数用于更换配置，参数为 层数,图片名
//event.returnValue=false;
showlayers=myequip.split('>');
newequip="";
for(i=0;i<showlayers.length;i++){
if(i+1==layer){
if(img==showlayers[i]) newequip+="df"; //如果该层已是这幅图片，则恢复为原始图片
else newequip+=img; //否则换为这幅图
}
else newequip+=showlayers[i]; //其他层图片不变
if(i+1!=showlayers.length) newequip+=">";
}
shoiwit(newequip); //显示最新配置
}
-->
</script>
<script event="onclick" for="cs">
var obj=event.srcElement;
if(obj.tagName!="IMG")return;
var vars=obj.src.match(/\/(\d)\/(\d)x\.gif$/);
dressit(vars[1],vars[2]);
</script>
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="https://www.jb51.net/4/1x.gif"></td>
<td><img src="https://www.jb51.net/4/2x.gif"></td>
<td><img src="https://www.jb51.net/4/3x.gif"></td>
<td><img src="https://www.jb51.net/4/4x.gif"></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/3/1x.gif"></td>
<td><img src="https://www.jb51.net/3/2x.gif"></td>
<td><img src="https://www.jb51.net/3/3x.gif"></td>
<td><img src="https://www.jb51.net/3/4x.gif"></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/2/1x.gif"></td>
<td><img src="https://www.jb51.net/2/2x.gif"></td>
<td><img src="https://www.jb51.net/2/3x.gif"></td>
<td><img src="https://www.jb51.net/2/4x.gif"></td>
</tr>
<tr>
<td><img src="https://www.jb51.net/1/1x.gif"></td>
<td><img src="https://www.jb51.net/1/2x.gif"></td>
<td><img src="https://www.jb51.net/1/3x.gif"></td>
<td><img src="https://www.jb51.net/1/4x.gif"></td>
</tr>
</table>
</body>
</html>
运行效果如下图所示：
