Ces exemples d'articles décrivent comment réaliser l'effet de l'imitation de QQ Show s'habillant en js. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! 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">
<adal>
<Title> Imitation QQ Show Effecture Effet </TITAL>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312">
<! - Ajoutez le code suivant entre <A-Head> et </ Head> ->
<style>
#cs img {curseur: main}
</ style>
<base href = "http://www.zzsky.cn/effecct/images/qqshow/">
</ head>
<body>
<! - Ajoutez le code suivant entre <body> et </body> ->
<! - Placez le code suivant où vous souhaitez afficher l'aperçu de l'image ->
<div id = "bodyshow" style = "border: 1px solide # 000000; padding: 0; position: relative; gauche: 0px; top: 0px; hauteur: 226px; largeur: 140px;"> </div>
<! - Ceci est un formulaire de soumission, affectant une chaîne représentant l'image utilisateur au domaine caché userRequip soumission->
<form name = "equipform" méthode = "post" action = "">
<input name = "useRequip" type = "Hidden" value = "">
<input name = "SaveEQuip" type = "soumi" value = "Enregistrer l'image">
<input name = "toreequip" type = "bouton" value = "image originale" onClick = "shoiwit ('df> df> df> 0'); return false;" >
</ form>
<script linguisse = "javascript">
<! -
var myequip = "df> df> df> 0"; // Le code de configuration d'affichage initial peut être lu et sorti par le serveur.
fonction shoewit (equip) {// Cette fonction est configurée comme un paramètre pour afficher un avatar virtuel
showlayers = equip.split ('>'); // Utilisez ">" comme séparateur pour attribuer les noms d'image de chaque calque à un array showlayers []
str = "";
for (i = 0; i <showlayers.length; i ++) {
if (showLayers [i]! = '0' && showlayers [i]! = '') {// Si le nom de l'image est 0 ou vide, le calque ne sera pas affiché.
str + = "<img src = '" + (i + 1) + "/" + showlayers [i] + ". gif' style = 'padding: 0; position: absolu; top: 0; gauche: 0; width: 140; height: 226; z-index:" + (i + 1) + ";'>";
}
}
// couvre enfin une image complètement transparente sur la couche supérieure, afin que l'utilisateur ne puisse enregistrer cette image dans le lien droit ci-dessus> Enregistrer sous:
str + = "<img src = 'blank.gif' style = 'padding: 0; position: absolu; en haut: 0; gauche: 0; largeur: 140; hauteur: 226; z-index: 100;'>";
if (equipform.usereQuip) equipform.UseRequip.value = myEquip = equip; // attribue le code de configuration au domaine caché
bodyshow.innerhtml = str; // montre des photos de chaque couche.
}
// Après le chargement de la page, l'image virtuelle initiale s'affiche en premier:
document.body.onload = new function ("shoiwit (myequip)");
Fonction Dressit (couche, img) {// Cette fonction est utilisée pour modifier la configuration, les paramètres sont le nombre de couches, le nom de l'image
//event.returnvalue=false;
showlayers = myequip.split ('>');
newequip = "";
for (i = 0; i <showlayers.length; i ++) {
if (i + 1 == couche) {
if (img == showlayers [i]) newequip + = "df"; // Si le calque est déjà cette image, elle sera restaurée à l'image originale
else newequip + = img; // autrement passer à cette image
}
else newequip + = showlayers [i]; // Les autres couches d'images restent inchangées
if (i + 1! = showlayers.length) newequip + = ">";
}
Shoiwit (newequip); // Afficher la dernière configuration
}
->
</cript>
<script event = "onclick" pour = "cs">
var obj = event.srcelement;
if (obj.tagname! = "img") return;
var vars = obj.src.match (/// (/ d) // (/ d) x / .gif $ /);
dressit (vars [1], vars [2]);
</cript>
<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>
</docy>
</html>
L'effet de fonctionnement est illustré dans la figure ci-dessous:
J'espère que cet article sera utile à la programmation JavaScript de tous.