ตัวอย่างบทความนี้อธิบายถึงวิธีการบรรลุผลของการเลียนแบบ QQ Show Dress-up ใน JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
คัดลอกรหัสดังต่อไปนี้: <! 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">
<head>
<title> เลียนแบบ QQ Show Effects </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; ตำแหน่ง: ญาติ; ซ้าย: 0px; top: 0px; ความสูง: 226px; ความกว้าง: 140px;"> </div>
<!-นี่คือแบบฟอร์มการส่งการกำหนดสตริงที่แสดงภาพผู้ใช้ให้กับผู้ใช้โดเมนที่ซ่อน
<form name = "equipform" method = "post" action = "">
<input name = "userequip" type = "hidden" value = "">
<input name = "saveexp" type = "submit" value = "บันทึกภาพ">
<input name = "toreequip" type = "button" value = "ภาพต้นฉบับ" onclick = "shoiwit ('df> df> df> 0'); return false;" -
</form>
<ภาษาสคริปต์ = "JavaScript">
-
var myequip = "df> df> df> 0"; // รหัสการกำหนดค่าการแสดงผลเริ่มต้นสามารถอ่านและส่งออกโดยเซิร์ฟเวอร์
ฟังก์ชั่น shoewit (expure) {// ฟังก์ชั่นนี้ได้รับการกำหนดค่าเป็นพารามิเตอร์เพื่อแสดงอวตารเสมือนจริง
showlayers = equip.split ('>'); // ใช้ ">" เป็นตัวคั่นเพื่อกำหนดชื่อภาพของแต่ละเลเยอร์ให้กับอาร์เรย์ showlayers []
str = "";
สำหรับ (i = 0; i <showlayers.length; i ++) {
if (showlayers [i]! = '0' && showlayers [i]! = '') {// ถ้าชื่อภาพเป็น 0 หรือว่างเปล่าเลเยอร์จะไม่แสดง
str+= "<img src = '"+(i+1)+"/"+showlayers [i]+". gif' style = 'padding: 0; ตำแหน่ง: Absolute; top: 0; ซ้าย: 0; width: 140; ความสูง: 226; z-index:"+(i+1)+";'>";
-
-
// ในที่สุดครอบคลุมภาพที่โปร่งใสอย่างสมบูรณ์บนเลเยอร์ด้านบนเพื่อให้ผู้ใช้สามารถบันทึกภาพนี้ในลิงค์ขวาด้านบน> บันทึกเป็น:
str+= "<img src = 'blank.gif' style = 'padding: 0; ตำแหน่ง: Absolute; top: 0; ซ้าย: 0; ความกว้าง: 140; ความสูง: 226; z-index: 100;'>";
if (expurfform.userequip) equipform.userequip.value = myequip = equip; // กำหนดรหัสการกำหนดค่าให้กับโดเมนที่ซ่อนอยู่
bodyshow.innerhtml = str; // แสดงรูปภาพของแต่ละชั้น
-
// หลังจากการโหลดหน้าเว็บภาพเสมือนเริ่มต้นจะปรากฏขึ้นก่อน:
document.body.onload = ฟังก์ชั่นใหม่ ("shoiwit (myequip)");
ฟังก์ชั่น dressit (เลเยอร์, img) {// ฟังก์ชั่นนี้ใช้เพื่อเปลี่ยนการกำหนดค่าพารามิเตอร์คือจำนวนเลเยอร์ชื่อภาพ
//event.returnvalue=false;
showlayers = myequip.split ('>');
newEquip = "";
สำหรับ (i = 0; i <showlayers.length; i ++) {
if (i+1 == เลเยอร์) {
if (img == showlayers [i]) newEquip+= "df"; // ถ้าเลเยอร์เป็นภาพนี้แล้วมันจะถูกคืนกลับไปเป็นภาพต้นฉบับ
else newEquip+= img; // มิฉะนั้นเปลี่ยนเป็นภาพนี้
-
else newEquip+= showlayers [i]; // รูปภาพอื่น ๆ ยังคงไม่เปลี่ยนแปลง
if (i+1! = showlayers.length) newEquip+= ">";
-
Shoiwit (Newequip); // แสดงการกำหนดค่าล่าสุด
-
-
</script>
<script event = "onclick" สำหรับ = "cs">
var obj = event.srcelement;
ถ้า (obj.tagname! = "img") กลับ;
vars 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 ของทุกคน