Este artigo descreve o método do JS para realizar a parada de rolagem de imagem quando o mouse passa. Compartilhe para sua referência. O método de implementação específico é o seguinte:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> Quando o mouse passa, <a href = 'sitejs-16691-1.html' target = '_ blank'> <u> rolagem de imagem </u> </a> Efeito de parada </title>
</head>
<style type = "text/css">
<!-
#www_jb51_net {
Antecedentes: #FFF;
estouro: oculto;
Border: 1px tracejado #CCC;
Largura: 325px;
Altura: 245px;
}
#www_jb51_net img {
borda: 3px sólido #f2f2f2;
}
#Indemo {
flutuar: esquerda;
Largura: 800%;
}
#Demo1 {
flutuar: esquerda;
}
#Demo2 {
flutuar: esquerda;
}
->
</style>
<Body>
Role para a esquerda
<div id = "www_jb51_net">
<div id = "Indemo">
<div id = "Demo1">
<a href = "#"> <img src = "imagens/m01.jpg"/> </a>
<a href = "#"> <img src = "imagens/m02.jpg"/> </a>
<a href = "#"> <img src = "imagens/m03.jpg"/> </a>
<a href = "#"> <img src = "imagens/m04.jpg"/> </a>
<a href = "#"> <img src = "imagens/m05.jpg"/> </a>
<a href = "#"> <img src = "imagens/m06.jpg"/> </a>
</div>
<div id = "Demo2"> </div>
</div>
</div>
<Cript>
<!-
var velocidade = 10;
var tab = document.getElementById ("www_jb51_net");
var tab1 = document.getElementById ("Demo1");
var tab2 = document.getElementById ("Demo2");
tab2.innerhtml = tab1.innerhtml;
Função de marquise () {
if (tab2.offsetWidth-tab.scrollleft <= 0)
Tab.ScrollLeft- = tab1.offsetWidth
outro{
tab.ScrollLeft ++;
}
}
var myMar = setInterval (marquise, velocidade);
tab.onMouseOver = function () {ClearInterval (myMar)};
tab.onMouseOut = function () {myMar = setInterval (marquise, velocidade)};
->
</script>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.