Artikel ini menjelaskan metode JS+CSS untuk mewujudkan tampilan gradien lapisan div yang mendorong mouse. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> div layer yang diimplementasikan oleh JS+CSS untuk merasakan tampilan gradien mouse </iteme>
<tyle>
#tip{
Posisi: Absolute;
Kiri: 90px;
Lebar: 0px;
Tinggi: 0px;
Warna: #fff;
font-size: 12px;
Latar Belakang:#000;
Perbatasan: 1px solid #def;
filter: alpha (opacity = 0);
Opacity: 0;
z-index: 999;
}
</tyle>
<type skrip = "Teks/JavaScript">
<!-
// Tentukan fungsi untuk "mendapatkan simpul DOM yang ditentukan" karena laju penggunaannya kembali tinggi
fungsi $ (d) {return document.getElementById (d);}
// Kontrol Div untuk ditampilkan secara bertahap
var i = 0;
function change_show () {
var obj = $ ("tip");
i = i+5; // Secara bertahap menampilkan kecepatan
obj.style.filter = "alpha (opacity =" + i + ")"; // Transparansi secara bertahap berkurang
obj.style.opacity = i/100; // Kompatibel dengan Firefox
if (i> = 100) {
ClearInterval (S);
i = 0;
}
}
// Kontrol Div secara bertahap menghilang
var j = 100;
function change_hidden () {
var obj = $ ("tip");
J = J-5; // Secara bertahap menghilang kecepatan
obj.style.filter = "alpha (opacity =" + j + ")"; // Transparansi secara bertahap meningkat
obj.style.opacity = j/100; // Kompatibel dengan Firefox
if (j <= 0) {
ClearInterval (H);
//obj.style.display="none ";
j = 100;
}
}
// Kontrol perilaku ubah_show ()
var s;
function show (x) {
if (s) {clearInterval (s);}
$ ("tip"). style.display = "block";
s = setInterval (change_show, 1);
}
// Kontrol Perilaku Change_Hidden ()
fungsi tersembunyi (x) {
$ ("tip"). innerhtml = "";
h = setInterval (change_hidden, 1);
}
//->
</script>
</head>
<body>
<Div id = "Tip" style = "latar belakang-warna: biru; lebar: 48%; tinggi: 48%;" onmouseover = "show (this);" onmouseout = "tersembunyi (ini);">
</div>
<br />
<br> Slide mouse di sini, layar gradien div ditampilkan <br> <hr> yang dikumpulkan di internet, hanya untuk komunikasi minat dan pembelajaran, dan bukan untuk tujuan komersial. </font> </p>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.