この記事の例では、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プログラミングに役立つことを願っています。