Artikel ini menjelaskan metode JS untuk mewujudkan gambar yang menggulir saat mouse lewat. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salinan kode adalah 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 = gb2312" />
<title> Saat mouse lewat, <a href = 'siteJs-16691-1.html' target = '_ blank'> <u> Gulir gambar </u> </a> Stop Effect </iteme>
</head>
<type style = "text/css">
<!-
#www_jb51_net {
Latar belakang: #FFF;
meluap: tersembunyi;
Perbatasan: 1px putus #CCC;
Lebar: 325px;
Tinggi: 245px;
}
#www_jb51_net img {
BORDER: 3PX SOLID #F2F2F2;
}
#indemo {
float: kiri;
Lebar: 800%;
}
#demo1 {
float: kiri;
}
#demo2 {
float: kiri;
}
->
</tyle>
<body>
Gulir ke kiri
<Div id = "www_jb51_net">
<Div id = "indemo">
<Div id = "Demo1">
<a href = "#"> <img src = "gambar/m01.jpg"/> </a>
<a href = "#"> <img src = "gambar/m02.jpg"/> </a>
<a href = "#"> <img src = "gambar/m03.jpg"/> </a>
<a href = "#"> <img src = "gambar/m04.jpg"/> </a>
<a href = "#"> <img src = "gambar/m05.jpg"/> </a>
<a href = "#"> <img src = "gambar/m06.jpg"/> </a>
</div>
<Div ID = "Demo2"> </div>
</div>
</div>
<script>
<!-
var speed = 10;
var tab = document.getElementById ("www_jb51_net");
var tab1 = document.geteLementById ("demo1");
var tab2 = document.geteLementById ("demo2");
tab2.innerHtml = tab1.innerHtml;
fungsi marquee () {
if (tab2.offsetwidth-tab.scrollleft <= 0)
tab.scrollleft- = tab1.offsetWidth
kalau tidak{
tab.scrollleft ++;
}
}
var mymar = setInterval (marquee, speed);
tab.onMouseOver = function () {clearInterval (mymar)};
tab.onMouseout = function () {mymar = setInterval (marquee, speed)};
->
</script>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.