Os exemplos deste artigo descrevem como alcançar o efeito de imitar o QQ Show Dress-Up em JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte maneira: <!
<html xmlns = "www.w3.org/1999/xhtml">
<head>
<title> imitação QQ Show Dress-Up Effect </ititle>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<!-Adicione o seguinte código entre <head> e </head>->
<estilo>
#cs img {cursor: Hand}
</style>
<base href = "http://www.zzsky.cn/effect/images/qqshow/">
</head>
<Body>
<!-Adicione o seguinte código entre <body> e </body>->
<!-Coloque o seguinte código onde você deseja exibir a visualização da imagem->
<div id = "bodyshow" style = "borda: 1px sólido #000000; preenchimento: 0; posição: relativa; esquerda: 0px; topo: 0px; altura: 226px; largura: 140px;"> </div>
<!-Este é um formulário de envio, atribuindo uma string que representa a imagem do usuário ao domínio oculto UserRequip enviado->>
<formul
<input name = "useRequip" type = "hidden" value = "">
<input name = "saveeQuip" type = "submite" value = "salvar imagem">
<Nome de entrada = "ToreEquip" type = "Button" value = "imagem original" onclick = "shoiwit ('df> df> df> 0'); retorna false;" >
</morm>
<Script Language = "JavaScript">
<!-
var myequip = "df> df> df> 0"; // O código de configuração de exibição inicial pode ser lido e emitido pelo servidor.
function shoewit (EQUEL) {// Esta função está configurada como um parâmetro para exibir avatar virtual
showLayers = Equip.split ('>'); // Use ">" como o separador para atribuir os nomes da imagem de cada camada a um showlayers de matriz []
str = "";
for (i = 0; i <showlayers.length; i ++) {
if (showlayers [i]! = '0' && showLayers [i]! = '') {// Se o nome da imagem estiver 0 ou vazio, a camada não será exibida.
str+= "<img src = '"+(i+1)+"/"+showlayers [i]+". gif' style = 'estofamento: 0; posição: absoluto; topo: 0; esquerda: 0; largura: 140; altura: 226; z-index:"+(i+1)+";'>";;
}
}
// Finalmente, cobre uma imagem completamente transparente na camada superior, para que o usuário possa salvar apenas essa imagem no link certo acima> Salvar como:
str+= "<img src = 'blank.gif' style = 'preenchimento: 0; posição: absoluto; topo: 0; esquerda: 0; largura: 140; altura: 226; z-index: 100;'>";
if (EQUIFFORM.USEREQUIP) EQUILAÇÃO.USEREQUIP.VALUE = myEQUIP = EQUIP; // atribui o código de configuração ao domínio oculto
bodyshow.innerhtml = str; // mostra fotos de cada camada.
}
// Após o carregamento da página, a imagem virtual inicial é exibida primeiro:
document.body.onload = nova função ("shoiwit (myequip)");
FUNÇÃO DRESTIT (Camada, img) {// Esta função é usada para alterar a configuração, os parâmetros são o número de camadas, o nome da imagem
//event.returnValue=false;
showlayers = myequip.split ('>');
newequip = "";
for (i = 0; i <showlayers.length; i ++) {
if (i+1 == camada) {
if (img == showLayers [i]) neweQuip+= "df"; // Se a camada já for esta imagem, ela será restaurada na imagem original
else newequip+= img; // Caso contrário, mude para esta imagem
}
else newequip+= showlayers [i]; // as outras camadas de fotos permanecem inalteradas
if (i+1! = showLayers.length) newEQUIP+= ">";
}
Shoiwit (neweQuip); // Mostrar a configuração mais recente
}
->
</script>
<script event = "OnClick" para = "cs">
var obj = event.srcelement;
if (obj.tagName! = "img") retornar;
var vars = obj.src.match (/// (/d) // (/d) x/.gif $/);
Dressit (vars [1], vars [2]);
</script>
<tabela 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>
</tabela>
</body>
</html>
O efeito de operação é mostrado na figura abaixo:
Espero que este artigo seja útil para a programação JavaScript de todos.