Este artículo describe el método para implementar la pantalla de imagen de detección del mouse por JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! 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">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Efecto de pantalla de imagen de detección del mouse </title>
<!-[si LTE IE 6]>
<script language = "javaScript">
var w3cdom = (document.createElement () && document.getElementsByTagName ());
Window.onload = pinballefect;
función pinballeffect ()
{
if (! w3cdom) return;
var allelements = document.getElementsByTagName ('*');
var originalbackgrounds = new Array ();
para (var i = 0; i <alelements.length; i ++)
{
if (AllElements [i] .className.IndexOf ('HoverEffect')> = 0)
{
Loselementos [i] .onmouseover = mouseGoesover;
Allementos [i] .onMouseOut = MouseGoesout;
}
}
}
function mousegoSover ()
{
OriginalClassNamEstring = this.ClassName;
this.classname += "Lay-on";
}
function mousegoesout ()
{
this.classname = originalClassNamEdring;
}
pinballeffect ();
</script>
<! [endif]->
<style type = "text/css">
cuerpo {
Antecedentes: #fff;
fuente: pequeña/1.5 "安体", Simsun, serif;
_font-size: medio;
}
un img {
borde: ninguno;
}
UL,
Li,
H5 {
Estilo de lista: ninguno dentro;
margen: 0;
relleno: 0;
}
.recomm {
Antecedentes:#999;
borde: 1px Solid #666;
Ancho: 600px;
Altura: 170px;
desbordamiento: oculto;
relleno: 10px;
margen: 0 auto;
Posición: relativo;
}
.Recomm ul {
borde: 1px sólido #ffff;
Border-izquierda: ninguno;
Altura: 168px;
Ancho: 599px;
desbordamiento: oculto;
*Posición: Absoluto; /* Resuelve el problema que desbordamiento: Oculto no puede ocultar elementos correctamente en IE*/
}
.Recomm Li {
flotante: izquierda;
Posición: relativo;
margen-derecha: -179px;
Altura: 100%;
desbordamiento: oculto;
White-Space: Nowrap;
Text-Align: Center;
}
.Recomm Li img {
Pantalla: bloque;
Border-izquierda: 1px Solid #FFFF;
Ancho: 248px;
Altura: 168px;
}
.Recomm Li H5 {
Posición: Absoluto;
Abajo: 0;
Izquierda: 0;
Altura: 20px;
Ancho: 239px;
Línea de altura: 20px;
Antecedentes: URL (../ Images/1_211621.png) No-Repeat;
Pantalla: ninguno;
Text-Align: Right;
Right de relleno: 10px;
tamaño de fuente: 1em;
Font-peso: Normal;
}
.Recomm Li: Hover, .recomm .lay-on {
Ancho: 249px;
margen-derecha: 0;
}
.Recomm Li: Hover H5, .recomm .lay-on H5 {
Pantalla: bloque;
}
</style>
</ablo>
<Body>
<div>
<ul>
<li> <a href = "/"> <img src = "/images/m01.jpg"/> </a>
<h5> hojas rojas que pasan amor por <a href = "/"> Code Home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m02.jpg"/> </a>
<h5> Wild Flowers Bloom by <a href = "/"> Shanshan Film and Television Online </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m03.jpg"/> </a>
<h5> El pasado es como té por <a href = "/"> Code Home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m04.jpg"/> </a>
<H5> Levante flores floración por <a href = "/"> Cine y televisión coloridas </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m05.jpg"/> </a>
<h5> Rose Love por <a href = "/"> Code Home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/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 artículo sea útil para la programación de JavaScript de todos.