Los ejemplos de este artículo describen cómo lograr el efecto de imitar el disfraz de QQ en JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd">
<html xmlns = "www.w3.org/1999/xhtml">
<Evista>
<title> IMitation QQ Show Dress-up Effect </title>
<meta http-oquiv = "content-type" content = "text/html; charset = gb2312">
<
<estilo>
#cs img {cursor: hand}
</style>
<base href = "http://www.zzsky.cn/effect/images/qqshow/">
</ablo>
<Body>
<!-Agregue el siguiente código entre <body> y </body>->
<!-Coloque el siguiente código donde desea mostrar la vista previa de la imagen->
<div id = "Bodyshow" style = "Border: 1px Solid #000000; relleno: 0; posición: relativo; izquierda: 0px; superior: 0px; altura: 226px; ancho: 140px;"> </div>
<
<Form name = "Equipform" Method = "Post" Action = "">
<input name = "userequip" type = "Hidden" value = "">
<input name = "saveEquip" type = "enviar" value = "guardar imagen">
<input name = "toreequip" type = "button" valor = "imagen original" onClick = "shoiwit ('df> df> df> 0'); return false;" >
</form>
<script language = "javaScript">
<!-
var myEquip = "df> df> df> 0"; // El servidor puede leer y emitir el código de configuración de visualización inicial.
function shoewit (equip) {// Esta función está configurada como un parámetro para mostrar un avatar virtual
showLayers = Equip.split ('>'); // use ">" como el separador para asignar los nombres de imágenes de cada capa a una matriz showlayers []
str = "";
para (i = 0; i <showlayers.length; i ++) {
if (showlayers [i]! = '0' && showLayers [i]! = '') {// Si el nombre de la imagen es 0 o vacía, la capa no se mostrará.
str+= "<img src = '"+(i+1)+"/"+showlayers [i]+". gif' style = 'padding: 0; posición: absoluto; arriba: 0; izquierda: 0; ancho: 140; altura: 226; z-index:"+(i+1)+";'>"; ";
}
}
// Finalmente cubra una imagen completamente transparente en la capa superior, para que el usuario solo pueda guardar esta imagen en el enlace correcto arriba> Guardar como:
str+= "<img src = 'shank.gif' style = 'Padding: 0; posición: absoluto; arriba: 0; izquierda: 0; ancho: 140; altura: 226; z-índice: 100;'>";
if (Equipform.Userequip) Equipform.Userequip.Value = myEquip = Equip; // Asigna el código de configuración al dominio oculto
BodyShow.innerhtml = str; // Mostrar imágenes de cada capa.
}
// Después de la carga de la página, la imagen virtual inicial se muestra primero:
document.body.onload = nueva función ("shoiwit (myEquip)");
function dressit (capa, img) {// Esta función se usa para cambiar la configuración, los parámetros son el número de capas, el nombre de la imagen
//event.returnvalue=false;
showLayers = myEquip.split ('>');
newequip = "";
para (i = 0; i <showlayers.length; i ++) {
if (i+1 == capa) {
if (img == showlayers [i]) newequip+= "df"; // Si la capa ya es esta imagen, se restaurará a la imagen original
else NewEquip+= img; // de lo contrario cambiar a esta imagen
}
else NewEquip+= ShowLayers [i]; // Las otras capas de imágenes permanecen sin cambios
if (i+1! = showlayers.length) newequip+= ">";
}
Shoiwit (NewEquip); // Mostrar la última configuración
}
->
</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 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>
El efecto de operación se muestra en la figura a continuación:
Espero que este artículo sea útil para la programación de JavaScript de todos.