⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 example.htm

📁 实现qq秀的功能。可以自由更换头像和衣服还有头发。其实用到了图形叠加的机制。
💻 HTM
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Show</title>
<style type="text/css">
<!--
td {
	font-size: 12px;
}
-->
</style>
</head>

<body scroll=no leftmargin=0 topmargin=0>
<table width="444" border="0" cellspacing="1" cellpadding="0">
  <form name="equipform" method="post" action="">
    <tr> 
      <td width="105" align="center">形象预览:</td>
      <td width="336" align="center">点击图片换上/脱下:</td>
    </tr>
    <tr> 
      <td height="24" align="center" valign="top"> <input name="userequip" type="hidden" value=""> 
        <input name="saveequip" type="image" src="equipment/save.gif" width="55" height="20" border="0" onclick="alert('将向服务器提交 userequip=\''+equipform.userequip.value+'\'');return false;" > 
        <input name="toreequip" type="image" src="equipment/restatus.gif" width="55" height="20" border="0" onclick="shoiwit(dfequip);return false;" > 
      </td>
      <td width="336" rowspan="2"><table width="78%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td><a href="javascript:dressit(4,1)"><img src="equipment/4/1x.gif" width="84" height="84" border="0"></a></td>
            <td><a href="javascript:dressit(4,2)"><img src="equipment/4/2x.gif" width="84" height="84" border="0"></a></td>
            <td><a href="javascript:dressit(4,3)"><img src="equipment/4/3x.gif" width="84" height="84" border="0"></a></td>
            <td><a href="javascript:dressit(4,4)"><img src="equipment/4/4x.gif" width="84" height="84" border="0"></a></td>
          </tr>
		  <tr> 
            <td><a href="javascript:dressit(3,1)"><img src="equipment/3/1x.gif" width="84" height="84" border="0"></a></td>
            <td><a href="javascript:dressit(3,2)"><img src="equipment/3/2x.gif" width="84" height="84" border="0"></a></td>
            <td><a href="javascript:dressit(3,3)"><img src="equipment/3/3x.gif" width="84" height="84" border="0"></a></td>
            <td><a href="javascript:dressit(3,4)"><img src="equipment/3/4x.gif" width="84" height="84" border="0"></a></td>
          </tr>
          <tr> 
            <td><a href="javascript:dressit(2,1)"><img src="equipment/2/1x.gif" width="84" height="84" border="0"></a></td>
            <td><a href="javascript:dressit(2,2)"><img src="equipment/2/2x.gif" width="84" height="84" border="0"></a></td>
            <td><a href="javascript:dressit(2,3)"><img src="equipment/2/3x.gif" width="84" height="84" border="0"></a></td>
            <td><a href="javascript:dressit(2,4)"><img src="equipment/2/4x.gif" width="84" height="84" border="0"></a></td>
          </tr>
          <tr> 
            <td width="21%"><a href="javascript:dressit(1,1)"><img src="equipment/1/1x.gif" width="84" height="84" border="0"></a></td>
            <td width="21%"><a href="javascript:dressit(1,2)"><img src="equipment/1/2x.gif" width="84" height="84" border="0"></a></td>
            <td width="13%"><a href="javascript:dressit(1,3)"><img src="equipment/1/3x.gif" width="84" height="84" border="0"></a></td>
            <td width="45%"><a href="javascript:dressit(1,4)"><img src="equipment/1/4x.gif" width="84" height="84" border="0"></a></td>
          </tr>
        </table></td>
    </tr>
    <tr> 
      <td valign="top"> <div id="bodyshow" style="border:1px solid #000000;padding:0;POSITION: relative; Left: 0px; TOP: 0px; HEIGHT: 226px;  WIDTH: 140px;"></div></td>
    </tr>
  </form>
</table>
<script language="JavaScript">
<!--
var dfequip="df>df>df>0";
var myequip="df>df>df>0";

function shoiwit(equip){
 showlayers=equip.split('>');
 str="";
 for(i=0;i<showlayers.length;i++){
  if(showlayers[i]!='0'&&showlayers[i]!=''){
   str+="<img src='equipment/"+(i+1)+"/"+showlayers[i]+".gif' style='padding:0;position:absolute;top:0;left:0;width:140;height:226;z-index:"+(i+1)+";'>";
  }
 }
 str+="<img src='equipment/blank.gif' style='padding:0;position:absolute;top:0;left:0;width:140;height:226;z-index:100;'>";
 if(equipform.userequip) equipform.userequip.value=myequip=equip;
 bodyshow.innerHTML=str;
}

document.body.onload=new Function("shoiwit(dfequip);");

function dressit(layer,img){
 showlayers=myequip.split('>');
 newequip="";
 for(i=0;i<showlayers.length;i++){
  if(i+1==layer){
   if(img!=showlayers[i]) newequip+=img;
   else newequip+="df";
  }
  else newequip+=showlayers[i];
  if(i+1!=showlayers.length) newequip+=">";
 }
 shoiwit(newequip);
}
-->
</script>

</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -