Este artigo descreve o método de implementar a exibição de imagem de detecção de mouse por JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Mouse Sensing Image Display Effect </title>
<!-[se LTE IE 6]>
<Script Language = "JavaScript">
var w3cdom = (document.createElement () && document.getElementsByTagName ());
window.onload = pinBalleffect;
função pinballeffect ()
{
se (! w3cdom) retornar;
var allements = document.getElementsByTagName ('*');
var originalbackgrounds = new Array ();
for (var i = 0; i <allelements.length; i ++)
{
if (allements [i] .className.IndexOf ('Hovefefft')> = 0)
{
ALELELENTOS [i] .onMouseOver = MouseGeoSover;
ALELELENTOS [I] .onMouseOut = MouseGeoesout;
}
}
}
função mousegoesover ()
{
originalclassNameString = this.className;
this.className += "lay-on";
}
função mousegoesout ()
{
this.className = originalclassNameString;
}
pinballeffet ();
</script>
<! [endif]->
<style type = "text/css">
corpo {
Antecedentes: #FFF;
Fonte: pequena/1.5 "安体", simsun, serif;
_font-size: Medium;
}
um img {
fronteira: nenhuma;
}
ul,
li,
H5 {
estilo de lista: nenhum por dentro;
margem: 0;
preenchimento: 0;
}
.recomm {
Antecedentes:#999;
fronteira: 1px sólido #666;
Largura: 600px;
Altura: 170px;
estouro: oculto;
preenchimento: 10px;
margem: 0 automático;
Posição: relativa;
}
.recomm ul {
borda: 1px sólido #ffff;
Border-Iff: Nenhum;
Altura: 168px;
Largura: 599px;
estouro: oculto;
*posição: absoluto; /* Resolva o problema que transborda: oculto não pode ocultar elementos corretamente no ie*/
}
.recomm li {
flutuar: esquerda;
Posição: relativa;
Margem-direita: -179px;
Altura: 100%;
estouro: oculto;
Espaço branco: Nowrap;
Alinhamento de texto: centro;
}
.recomm li img {
exibição: bloco;
Border-Ift: 1px Solid #FFFF;
Largura: 248px;
Altura: 168px;
}
.recomm li h5 {
Posição: Absoluto;
Inferior: 0;
Esquerda: 0;
Altura: 20px;
Largura: 239px;
altura de linha: 20px;
Antecedentes: URL (../ Images/1_211621.png) sem repetição;
Exibir: Nenhum;
Alinhamento de texto: à direita;
Right-right: 10px;
tamanho da fonte: 1em;
peso-fonte: normal;
}
.recomm li: hover, .recomm .lay-on {
Largura: 249px;
Margem-direita: 0;
}
.recomm li: hover h5, .recomm .lay-on h5 {
exibição: bloco;
}
</style>
</head>
<Body>
<div>
<ul>
<li> <a href = "/"> <img src = "/imagens/m01.jpg"/> </a>
<H5> folhas vermelhas que passam o amor por <a href = "/"> code home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/imagens/m02.jpg"/> </a>
<H5> flores silvestres florescem por <a href = "/"> Shanshan Film and Television Online </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/imagens/m03.jpg"/> </a>
<H5> O passado é como o chá por <a href = "/"> code home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/imagens/m04.jpg"/> </a>
<H5> Levante flores floresce por <a href = "/"> filme e televisão coloridos </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/imagens/m05.jpg"/> </a>
<H5> Rose Love por <a href = "/"> code home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/imagens/m09.jpg"/> </a>
<H5> Little Daisy por <a href = "/"> Shanshan Film and Television </a> 2010.09.23 </h5>
</li>
</ul>
</div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.