Contoh artikel ini menjelaskan cara mencapai efek meniru qq show dress-up di js. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "www.w3.org/1999/xhtml">
<head>
<title> imitasi qq show efek dress-up </iteme>
<meta http-equiv = "konten tipe" content = "text/html; charset = gb2312">
<!-Tambahkan kode berikut antara <head> dan </head>->
<tyle>
#cs img {cursor: hand}
</tyle>
<base href = "http://www.zzsky.cn/effect/images/qqshow/">
</head>
<body>
<!-Tambahkan kode berikut antara <body> dan </body>->
<!-Tempatkan kode berikut di mana Anda ingin menampilkan pratinjau gambar->
<Div id = "bodyshow" style = "border: 1px solid #000000; padding: 0; posisi: relatif; kiri: 0px; atas: 0px; tinggi: 226px; lebar: 140px;"> </div>
<!-Ini adalah formulir pengiriman, menetapkan string yang mewakili gambar pengguna ke Domain Hidden UserRequip Kirim->
<Form name = "Equipform" Method = "Post" Action = "">
<input name = "userequip" type = "hidden" value = "">
<input name = "saveequip" type = "kirim" value = "save image">
<input name = "toreequip" type = "tombol" value = "original image" onclick = "shoiwit ('df> df> df> 0'); return false;" >
</form>
<bahasa skrip = "javascript">
<!-
var myequip = "df> df> df> 0"; // Kode konfigurasi tampilan awal dapat dibaca dan di -output oleh server.
fungsi shoewit (equip) {// fungsi ini dikonfigurasi sebagai parameter untuk menampilkan avatar virtual
showlayers = equip.split ('>'); // gunakan ">" sebagai pemisah untuk menetapkan nama gambar dari setiap lapisan ke showlayers array []
str = "";
untuk (i = 0; i <showlayers.length; i ++) {
if (showlayers [i]! = '0' && showlayers [i]! = '') {// Jika nama gambarnya 0 atau kosong, lapisan tidak akan ditampilkan.
str+= "<img src = '"+(i+1)+"/"+showlayers [i]+". gif' style = 'padding: 0; posisi: absolute; atas: 0; kiri: 0; lebar: 140; tinggi: 226; z-index:"+(i+1)+";'>";
}
}
// Akhirnya menutupi gambar yang sepenuhnya transparan di lapisan atas, sehingga pengguna hanya dapat menyimpan gambar ini di tautan kanan di atas> simpan sebagai:
str+= "<img src = 'blank.gif' style = 'padding: 0; posisi: absolute; atas: 0; kiri: 0; lebar: 140; tinggi: 226; z-index: 100;'>";
if (equipform.userequip) equipform.userequip.value = myequip = equip; // Tetapkan kode konfigurasi ke domain tersembunyi
bodyshow.innerhtml = str; // Tunjukkan gambar setiap lapisan.
}
// Setelah pemuatan halaman, gambar virtual awal ditampilkan terlebih dahulu:
document.body.onload = fungsi baru ("shoiwit (myequip)");
function DressIt (layer, img) {// Fungsi ini digunakan untuk mengubah konfigurasi, parameternya adalah jumlah lapisan, nama gambar
//event.ReturnValue=False;
showlayers = myequip.split ('>');
newequip = "";
untuk (i = 0; i <showlayers.length; i ++) {
if (i+1 == layer) {
if (img == showlayers [i]) newequip+= "df"; // Jika lapisan sudah gambar ini, itu akan dipulihkan ke gambar aslinya
lain newequip+= img; // jika tidak ubah ke gambar ini
}
lain newequip+= showlayers [i]; // Lapisan gambar lainnya tetap tidak berubah
if (i+1! = showlayers.length) newequip+= ">";
}
Shoiwit (newequip); // Tunjukkan konfigurasi terbaru
}
->
</script>
<event skrip = "onClick" untuk = "cs">
var obj = event.srcelement;
if (obj.tagname! = "img") kembali;
var vars = obj.src.match (/// (/d) // (/d) x/.gif $/);
Dressit (VARS [1], VARS [2]);
</script>
<tabel 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>
</boable>
</body>
</html>
Efek operasi ditunjukkan pada gambar di bawah ini:
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.