تصف أمثلة هذه المقالة كيفية تحقيق تأثير تقليد QQ عرض اللباس في 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 QQ Enlow تأثير اللباس </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 = "الحدود: 1px الصلبة #000000 ؛ الحشو: 0 ؛ الموضع: النسبية ؛ اليسار: 0px ؛ الأعلى: 0px ؛ الارتفاع: 226px ؛ العرض: 140px ؛"> </div>
<!-هذا نموذج تقديم ، حيث يتم تعيين سلسلة تمثل صورة المستخدم إلى إرسال Domain userRequip المخفي->
<form name = "equipform" method = "post" Action = "">
<name input = "userequip" type = "hidden" value = "">
<name input = "saveequip" type = "submit" value = "Save Image">
<name input = "toreequip" type = "button" value = "Original Image" onClick = "ShoiWit ('df> df> df> 0') ؛ return false ؛" >
</form>
<script language = "javaScript">
<!-
var myequip = "df> df> df> 0" ؛ // يمكن قراءة رمز تكوين العرض الأولي وإخراجه بواسطة الخادم.
دالة shoewit (تجهيز) {// تم تكوين هذه الوظيفة كمعلمة لعرض الصورة الرمزية الافتراضية
ShowLayers = equip.split ('>') ؛ // استخدم ">" كفاصل لتعيين أسماء الصور لكل طبقة إلى صفيف showlayers []
str = "" ؛
لـ (i = 0 ؛ i <showlayers.length ؛ i ++) {
إذا (showlayers [i]! = '0' && showlayers [i]! = '') {// إذا كان اسم الصورة 0 أو فارغًا ، فلن يتم عرض الطبقة.
str+= "<img src = '"+(i+1)+"/"+showlayers [i]+". GIF' style = 'padding: 0 ؛ الموضع: aboor ؛ top: 0 ؛ اليسار: 0 ؛ العرض: 140 ؛ الارتفاع: 226 ؛ z-index:"+(i+1)+"؛
}
}
//غطي أخيرًا صورة شفافة تمامًا على الطبقة العليا ، بحيث يمكن للمستخدم حفظ هذه الصورة فقط في الرابط الأيمن أعلاه> حفظ AS:
str+= "<img src = 'blank.gif' style = 'padding: 0 ؛ الموضع: المطلق ؛ أعلى: 0 ؛ اليسار: 0 ؛ العرض: 140 ؛ الارتفاع: 226 ؛ z-index: 100 ؛'>" ؛
if (equipform.userequip) equipform.userequip.value = myequip = equip ؛ // تعيين رمز التكوين إلى المجال المخفي
bodyshow.innerhtml = str ؛ // إظهار صور لكل طبقة.
}
// بعد تحميل الصفحة ، يتم عرض الصورة الافتراضية الأولية أولاً:
document.Obody.onload = وظيفة جديدة ("shoiwit (myequip)") ؛
دالة دالة (طبقة ، IMG) {// يتم استخدام هذه الوظيفة لتغيير التكوين ، والمعلمات هي عدد الطبقات ، اسم الصورة
//event.returnvalue=false ؛
showlayers = myequip.split ('>') ؛
newequip = "" ؛
لـ (i = 0 ؛ i <showlayers.length ؛ i ++) {
إذا (i+1 == طبقة) {
if (img == showlayers [i]) newequip+= "df" ؛ // إذا كانت الطبقة بالفعل هذه الصورة ، فسيتم استعادتها إلى الصورة الأصلية
آخر newequip+= img ؛ // تغيير خلاف ذلك إلى هذه الصورة
}
آخر newequip+= showlayers [i] ؛ // لا تزال الطبقات الأخرى من الصور دون تغيير
if (i+1! = showlayers.length) newequip+= ">" ؛
}
shoiwit (newequip) ؛ // إظهار أحدث تكوين
}
->
</script>
<script event = "onClick" لـ = "cs">
var obj = event.srcelement ؛
if (obj.tagname! = "img") return ؛
var vars = obj.src.match (/// (/d) // (/d) x/.gif $/) ؛
اللباس (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>
</r>
<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>
</r>
<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>
</r>
<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>
</r>
</table>
</body>
</html>
يظهر تأثير التشغيل في الشكل أدناه:
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.