In diesen Artikelbeispielen wird beschrieben, wie die Auswirkung der Imitation von QQ-Show-Kleidungen in JS erreicht werden kann. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "www.w3.org/1999/xhtml">
<kopf>
<title> Imitation QQ Show Dress-up Effect </title>
<meta http-äquiv = "content-type" content = "text/html; charSet = gb2312">
<!-Fügen Sie den folgenden Code zwischen <kopf> und </head>-> hinzu
<Styles>
#cs img {cursor: Hand}
</style>
<base href = "http://www.zzsky.cn/effect/images/qqshow/">
</head>
<body>
<!-Fügen Sie den folgenden Code zwischen <body> und </body>-> hinzu
<!-Platzieren Sie den folgenden Code, in dem Sie die Bildvorschau anzeigen möchten->
<div id = "bodyShow" style = "border: 1px fest #000000; padding: 0; Position: relativ; links: 0px; ober: 0px; Höhe: 226px; Breite: 140px;"> </div>
<!-Dies ist ein Einreichungsformular, das eine Zeichenfolge zugewiesen wird, die dem Benutzerbild dem verborgenen Domain UserRequip Subjekt-> dem Benutzer darstellt
<form name = "aquapyform" methode = "post" action = "">
<input name = "UseSequip" Typ = "Hidden" value = "">
<input name = "saveAequip" type = "surfen" value = "Bild speichern">
<input name = "ToreEquip" type = "button" value = "Original Image" onclick = "shoiwit ('df> df> df> 0'); return false;" >
</form>
<script Language = "JavaScript">
<!-
var myequip = "df> df> df> 0"; // Der anfängliche Display -Konfigurationscode kann vom Server gelesen und ausgegeben werden.
Funktion showit (Equip) {// Diese Funktion ist als Parameter konfiguriert, um den virtuellen Avatar anzuzeigen
showlayers = equec.split ('>'); // verwenden ">" als Trennzeichen, um die Bildnamen jeder Ebene einem Array -Showlayers [] zuzuweisen []
str = "";
für (i = 0; i <showlayers.length; i ++) {
if (Showlayer [i]! = '0' && Showlayer [i]! = '') {// Wenn der Bildname 0 oder leer ist, wird die Ebene nicht angezeigt.
str+= "<img src = '"+(i+1)+"/"+showlayers [i]+". gif' style = 'padding: 0; Position: absolut; ober: 0; links: 0; width: 140; Höhe: 226; z-Index:"+(i+1)+";
}
}
// Abdecken Sie schließlich ein vollständig transparentes Bild auf der oberen Ebene, damit der Benutzer dieses Bild nur im rechten Link oben speichern kann> Speichern Sie:
str+= "<img src = 'leer.gif' style = 'padding: 0; Position: absolut; ober: 0; links: 0; Breite: 140; Höhe: 226; Z-Index: 100;'>";
if (equectform.useRequip) equipform.useRequip.Value = myequip = eque; // Weisen Sie den Konfigurationscode der versteckten Domäne zu
bodyShow.innerhtml = str; // Bilder von jeder Ebene anzeigen.
}
// Nach dem Laden der Seite wird zuerst das anfängliche virtuelle Bild angezeigt:
document.body.onload = new Function ("Shoiwit (myequip)");
Funktionskleid (Layer, IMG) {// Mit dieser Funktion wird die Konfiguration geändert. Die Parameter sind die Anzahl der Ebenen, der Bildname, der Bildname
//event.returnValue=false;
showlayers = myequip.split ('>');
newequip = "";
für (i = 0; i <showlayers.length; i ++) {
if (i+1 == Layer) {
if (img == showlayer [i]) newequip+= "df"; // Wenn die Ebene bereits dieses Bild ist, wird sie auf das Originalbild wiederhergestellt
sonst newEquip+= img; // Ansonsten dieses Bild ändern
}
sonst newequip+= showlayer [i]; // Die anderen Bilderschichten bleiben unverändert
if (i+1! = showlayers.length) newequip+= ">";
}
Shoiwit (NewEquip); // Zeigen Sie die neueste Konfiguration an
}
->
</script>
<script event = "onclick" für = "cs">
var obj = event.srcelement;
if (obj.tagname! = "img") return;
var vars = obj.src.match (/// (/d) // (/d) x/.gif $/);
Kleider (VARs [1], VARs [2]);
</script>
<Table Cellpacing = "0" cellpadding = "0" id = "cs">
<tr>
<td> <img src = "4/1x.gif"> </td>
<td> <img src = "4/2x.gif"> </td>
<td> <img src = "4/3x.gif"> </td>
<td> <img src = "4/4x.gif"> </td>
</tr>
<tr>
<td> <img src = "3/1x.gif"> </td>
<td> <img src = "3/2x.gif"> </td>
<td> <img src = "3/3x.gif"> </td>
<td> <img src = "3/4x.gif"> </td>
</tr>
<tr>
<td> <img src = "2/1x.gif"> </td>
<td> <img src = "2/2x.gif"> </td>
<td> <img src = "2/3x.gif"> </td>
<td> <img src = "2/4x.gif"> </td>
</tr>
<tr>
<td> <img src = "1/1x.gif"> </td>
<td> <img src = "1/2x.gif"> </td>
<td> <img src = "1/3x.gif"> </td>
<td> <img src = "1/4x.gif"> </td>
</tr>
</table>
</body>
</html>
Der Betriebseffekt ist in der folgenden Abbildung dargestellt:
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.