Cet article décrit la méthode de JS pour réaliser l'arrêt de défilement de l'image lorsque la souris passe. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312" />
<Title> Lorsque la souris passe par, <a href = 'Sitejs-16691-1.html' cible = '_ Blank'> <u> Image Scrolling </u> </a> Stop Effect </Title>
</ head>
<style type = "text / css">
<! -
# www_jb51_net {
Contexte: #FFF;
débordement: caché;
Border: 1px en pointillé #ccc;
Largeur: 325px;
hauteur: 245px;
}
# www_jb51_net img {
Border: 3px solide # f2f2f2;
}
#Indemo {
flottant: à gauche;
Largeur: 800%;
}
# Demo1 {
flottant: à gauche;
}
# Demo2 {
flottant: à gauche;
}
->
</ style>
<body>
Faites défiler vers la gauche
<div id = "www_jb51_net">
<div id = "indemo">
<div id = "Demo1">
<a href = "#"> <img src = "images / m01.jpg" /> </a>
<a href = "#"> <img src = "images / m02.jpg" /> </a>
<a href = "#"> <img src = "images / m03.jpg" /> </a>
<a href = "#"> <img src = "images / m04.jpg" /> </a>
<a href = "#"> <img src = "images / m05.jpg" /> </a>
<a href = "#"> <img src = "images / m06.jpg" /> </a>
</div>
<div id = "Demo2"> </div>
</div>
</div>
<cript>
<! -
Var Speed = 10;
var tab = document.getElementById ("www_jb51_net");
var tab1 = document.getElementById ("Demo1");
var tab2 = document.getElementById ("Demo2");
tab2.InnerHtml = tab1.innerHTML;
fonction Marquee () {
if (tab2.offsetwidth-tab.scrollleft <= 0)
tab.scrollleft- = tab1.offsetwidth
autre{
tab.scrollleft ++;
}
}
var mymar = setInterval (marquee, vitesse);
tab.onmouseOver = function () {ClearInterval (myMar)};
tab.onmouseout = function () {myMar = setInterval (Marquee, Speed)};
->
</cript>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.