Berikut adalah efek khusus JavaScript Pacaran, efeknya adalah sebagai berikut:
Tidak hanya efek gambar di bawah ini muncul, tetapi gambar juga dapat diputar dengan mouse. Ini hanyalah contoh sederhana dan tidak dimodifikasi. Berdasarkan contoh ini, ini dapat membuat pacaran lebih menyenangkan. Pria yang enggan, dapatkah Anda memposting halaman web seperti itu ke Loli kecil Anda? Besar.
Posting kode:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title> masukkan judul di sini </iteme>
<type style = "text/css">
tubuh{
Perbatasan: 1px Red Solid;
Lebar: 1000px;
Tinggi: 1000px;
margin: 0px auto;
padding: 0px;
Warna: Hijau;
}
/*
Seret objek dari aliran dokumen, menggunakan properti seperti kiri, kanan, atas, bawah, dll. Relatif ke
Yang paling dekat dengan objek induk yang paling diposisikan untuk posisi absolut. Jika objek induk seperti itu tidak ada,
Oleh objek tubuh. Dan kaskade ditentukan oleh atribut indeks z
*/
Div {
Posisi: Absolute;
}
</tyle>
<type skrip = "Teks/JavaScript">
// Mengapa saya harus menggunakan Onload? Karena ketika saya menginisialisasi div jam dalam kode JavaScript, halaman debug menemukan bahwa tidak ada implementasi
// Kemudian saya mengetahui alasannya, kode HTML diuraikan dari depan ke belakang. Saat mem -parsing kode javascript terlebih dahulu, buka tubuh
// Saat menambahkan node anak, tubuh yang belum terselesaikan tidak dapat ditemukan. Jadi Anda harus mengurus tubuh terlebih dahulu. Ada dua metode, satu
Metode penulisan //, cara lain adalah menambahkan metode onload ke tag tubuh.
window.onload = function () {
init ();
};
// Tentukan array div untuk menyimpan 12 divs
// Karena hubungan antara 12 posisi div, pertama -tama tentukan titik dan jari -jari untuk menghitung posisi div
var divs = [];
var lovebaby = ["i", "cinta", "kamu", "kamu", "bao", "bei", "cinta", "cinta", "aku", "wan", "wan", "wan", "wan" "wan" "wan" "wan" "w "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" W. "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" Wan "" "Wan" "Wan" "" Wan "" Wan "" Wan "" Wan "" "Wan" "" W. "" "Wan" "" Wan "" "Wan" "" Wan "" "Wan" "" Wan "" "Wan" "" Wan "" "Wan" "" Wan "" "Wan" "" Wan "" "Wan" "" Wan "" "Wan" "Wan" "" Wan ""
var cx = 300;
var CY=300;//----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var r = 150;
var divcenternode; // Posisi titik tengah harus dikontrol dan variabel global harus diatur
// Tentukan fungsi yang diinisialisasi
fungsi init () {
// Buat div di posisi titik tengah (Anda dapat menulis objek pacaran)
divCenternode = document.createelement ("div");
divCenternode.innerhtml = "Tingting, nikahi aku!";
Document.Body.AppendChild (DivCenternode);
divCenternode.style.left = (cx-50)+"px";
divCenternode.style.top = (cy-30)+"px";
// Buat 12 Divs untuk membentuk jam terlarang dan letakkan di dalam tubuh
untuk (var x = 1; x <= 12; x ++) {
// Buat div
var divnode = document.createElement ("div");
divnode.innerhtml = lovebaby [x-1];
// Objek tubuh tidak perlu diperoleh seperti objek lain, dan perpustakaan JS telah dienkapsulasi.
Document.Body.AppendChild (DivNode);
divs.push (divnode);
}
// Setiap kali startclock () mulai memposisikan ulang elemen div
/*
Bahkan, untuk mencapai efek rotasi, perlu untuk terus mengimbangi, atau
Reposisi, tetapi perulangan, Anda tidak dapat mengontrol berapa lama waktu yang dibutuhkan untuk memulai fungsi, lalu
Pada saat ini, objek jendela menyediakan metode.
*/
startclock ();
}
// Div's Offset
var offset = 0; // Gelar offset
// Tentukan fungsi untuk memposisikan dan memutar posisi secara terpisah
fungsi startclock () {
untuk (var x = 1; x <= 12; x ++) {
var div = div [x-1];
// derajat setiap angka
var dushu = 30*x+offset;
// Nilai sudut* Math.pi /180 = nilai sinar
var divleft = cx+r*math.sin (dushu*math.pi/180);
div.style.left = divleft+"px";
var divtop = cy-r*math.cos (dushu*math.pi/180);
div.style.top = divtop+"px";
}
Offset+= 50;
// Interval tertentu, panggilan balik fungsi ini
// Ekspresi dihitung setelah nilai milidetik yang ditentukan. Parameter pertama adalah ekspresi, parameter kedua adalah waktu
setTimeout (startclock, 80); // metode objek jendela
}
// Tentukan jam ini ke posisi yang berbeda saat mouse bergerak
function clockmove (event) {
Cx = event.clientx; // Koordinat X dari posisi mouse
Cy = event.clienty; // koordinat y dari posisi mouse
divCenternode.style.left = (cx-50)+"px";
divCenternode.style.top = (cy-30)+"px";
}
</script>
</head>
<body onmouseMove = "clockmove (event)">
<!-
1. Tampilkan 12 nomor dalam lingkaran
1/Buat 12 Divs, Tetapkan Nilai 1--12
2/Temukan 12 Divs dan membentuk lingkaran.
->
</body>
</html>
Saya awalnya ingin membuat tampilan jam yang bisa berputar dan berlari. Jadi penamaan dalam kode terkait dengan jam, jadi saya tidak akan bingung, sayang. Pemula di JavaScript, saya merasa bahwa JavaScript sangat kuat.