Artikel ini menjelaskan metode menerapkan tampilan gambar penginderaan mouse oleh 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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<iteme> Efek tampilan gambar penginderaan mouse </iteme>
<!-[jika LTE IE 6]>
<bahasa skrip = "javascript">
var w3cdom = (document.createElement () && document.geteLementsbyTagname ());
window.onload = pinballeffect;
fungsi pinballeffect ()
{
if (! w3cdom) kembali;
var allelements = document.geteLementsbyTagname ('*');
var originalbackgrounds = array baru ();
untuk (var i = 0; i <allelements.length; i ++)
{
if (allelements [i] .classname.indexof ('hovereffect')> = 0)
{
allelements [i] .onmouseover = mousegoesover;
allelements [i] .onmouseout = mousegoesout;
}
}
}
function mousegoesover ()
{
originalclassnamestring = this.className;
this.className += "lay-on";
}
function mousegoesout ()
{
this.classname = originalclassnamestring;
}
pinballeffect ();
</script>
<! [Endif]->
<type style = "text/css">
tubuh {
Latar belakang: #FFF;
Font: Kecil/1,5 "安体", Simsun, Serif;
_font-size: medium;
}
a img {
Perbatasan: Tidak Ada;
}
ul,
Li,
H5 {
List-style: Tidak ada di dalam;
Margin: 0;
Padding: 0;
}
.recomm {
Latar Belakang:#999;
Perbatasan: 1px solid #666;
Lebar: 600px;
Tinggi: 170px;
meluap: tersembunyi;
padding: 10px;
margin: 0 otomatis;
Posisi: kerabat;
}
.recomm ul {
Perbatasan: 1px solid #ffff;
Perbatasan-kiri: Tidak ada;
Tinggi: 168px;
Lebar: 599px;
meluap: tersembunyi;
*Posisi: Absolute; /* Selesaikan masalah yang meluap: Tersembunyi tidak dapat menyembunyikan elemen dengan benar di IE*/
}
.recomm li {
float: kiri;
Posisi: kerabat;
margin-kanan: -179px;
Tinggi: 100%;
meluap: tersembunyi;
SPACE PUTIH: Nowrap;
Teks-Align: tengah;
}
.recomm li img {
Tampilan: Blok;
Border-left: 1px solid #ffff;
Lebar: 248px;
Tinggi: 168px;
}
.recomm li h5 {
Posisi: Absolute;
Bawah: 0;
Kiri: 0;
Tinggi: 20px;
Lebar: 239px;
Line-Height: 20px;
Latar Belakang: URL (../ Gambar/1_211621.png) No-Repeat;
Tampilan: Tidak Ada;
Teks-Align: Benar;
Padding-Right: 10px;
font-size: 1em;
Font-Weight: Normal;
}
.recomm li: hover, .recomm .lay-on {
Lebar: 249px;
margin-kanan: 0;
}
.recomm li: hover h5, .recomm .lay-on h5 {
Tampilan: Blok;
}
</tyle>
</head>
<body>
<div>
<ul>
<li> <a href = "/"> <img src = "/gambar/m01.jpg"/> </a>
<H5> Red meninggalkan cinta melewati <a href = "/"> Home Home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/gambar/m02.jpg"/> </a>
<h5> Bunga liar mekar oleh <a href = "/"> Shanshan Film dan Televisi Online </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/gambar/m03.jpg"/> </a>
<h5> Masa lalu seperti teh oleh <a href = "/"> Home Home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/gambar/m04.jpg"/> </a>
<H5> Naikkan bunga mekar oleh <a href = "/"> Film dan televisi berwarna -warni </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/gambar/m05.jpg"/> </a>
<h5> Rose Love oleh <a href = "/"> Code Home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/gambar/m09.jpg"/> </a>
<h5> Daisy kecil oleh <a href = "/"> Shanshan Film dan Televisi </a> 2010.09.23 </h5>
</li>
</ul>
</div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.