この記事の例では、JSでQQショードレスアップを模倣する効果を達成する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
コードを次のようにコピーします。<
<html xmlns = "www.w3.org/1999/xhtml">
<head>
<title>模倣qqショードレスアップ効果</title>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<！ - <head>と</head> - >の間に次のコードを追加します
<style>
#CS IMG {カーソル：ハンド}
</style>
<base href = "http://www.zzsky.cn/effect/images/qqshow/">
</head>
<body>
<！ - <body>と</body> - >の間に次のコードを追加します
<！ - 画像のプレビューを表示する場所に次のコードを配置します - >
<div id = "bodyshow" style = "border：1px solid＃000000; padding：0; position：relative; left：0px; top：0px; height：226px; width：140px;"> </div>
<！ - これは送信フォームで、ユーザーイメージを表す文字列をHidden Domain userrequip submit->に割り当てます。
<form name = "equipform" method = "post" action = "">
<input name = "userequip" type = "hidden" value = "">
<input name = "save quip" type = "submit" value = "save image">
<入力名= "tore quip" type = "button" value = "original image" onclick = "shoiwit（ 'df> df> df> 0'）; return false;" >
</form>
<スクリプト言語= "javascript">
<！ -
var myequip = "df> df> df> 0"; //最初の表示構成コードは、サーバーによって読み取りおよび出力できます。
functionshoewit（equip）{//この関数は、仮想アバターを表示するパラメーターとして構成されています
showlayers = equip.split（ '>'）; //「>」をセパレーターとして使用して、各レイヤーの画像名を配列ショーレイヤーに割り当てます[]
str = "";
for（i = 0; i <showlayers.length; i ++）{
if（showlayers [i]！= '0' && showlayers [i]！= ''）{//画像名が0または空の場合、レイヤーは表示されません。
str+= "<img src = '"+（i+1）+"/"+showlayers [i]+"。gif' style = 'padding：0; position：aspolute; top：0; left：0; width：140; height：226; z-index："+（i+1）+";'>";
}
}
//最後に、上のレイヤー上の完全に透明な画像をカバーして、ユーザーが上記の右リンクにのみこの画像を保存できるようにします> ASを保存します。
str+= "<img src = 'blank.gif' style = 'padding：0; position：aspolute; top：0; left：0; width：140; height：226; z-index：100;'>";
if（equimpform.userequip）equipform.userequip.value = myequip = expime; //構成コードを非表示ドメインに割り当てます
bodyshow.innerhtml = str; //各レイヤーの写真を表示します。
}
//ページの読み込みの後、最初の仮想画像が最初に表示されます。
document.body.onload = new function（ "shoiwit（myequip）"）;
function dressit（layer、img）{//この関数は構成を変更するために使用されます。パラメーターはレイヤー数、画像名です
//event.returnvalue = false;
showlayers = myequip.split（ '>'）;
newequip = "";
for（i = 0; i <showlayers.length; i ++）{
if（i+1 == layer）{
if（img == showlayers [i]）newequip+= "df"; //レイヤーがすでにこの写真である場合、それは元の写真に復元されます
else newequip+= img; //それ以外の場合は、この写真に変更します
}
else newequip+= showlayers [i]; //写真の他のレイヤーは変更されていません
if（i+1！= showlayers.length）newequip+= ">";
}
shoiwit（newequip）; //最新の構成を表示します
}
- >
</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>
操作効果は、次の図に示されています。
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。