Cet article décrit la méthode d'implémentation de l'affichage de l'image de détection de souris par JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! 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 = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Effet d'affichage de l'image de détection de souris </TITAL>
<! - [Si LTE IE 6]>
<script linguisse = "javascript">
var w3cdom = (document.createElement () && document.getElementsByTagName ());
window.onload = pinbalffect;
fonction pinballeffect ()
{
si (! w3cdom) retourner;
var allelements = document.getElementsByTagName ('*');
var OriginalBackgrounds = new Array ();
for (var i = 0; i <allelements.length; i ++)
{
if (allements [i] .classname.indexof ('hovereffet')> = 0)
{
allélements [i] .onMouseOver = MouseGoesover;
allélements [i] .onMouseout = MouseGoesout;
}
}
}
Function MouseGoesover ()
{
originalClassNameString = this.className;
this.className + = "Lay-on";
}
Function MouseGoesout ()
{
this.classname = originalClassNameString;
}
pinBalleffect ();
</cript>
<! [endif] ->
<style type = "text / css">
corps {
Contexte: #FFF;
Police: petit / 1,5 "安体", Simsun, Serif;
_FONT-Size: Medium;
}
un img {
Border: aucun;
}
ul,
Li,
H5 {
Style de liste: Aucun à l'intérieur;
marge: 0;
rembourrage: 0;
}
.recomm {
Contexte: # 999;
Border: 1px solide # 666;
Largeur: 600px;
hauteur: 170px;
débordement: caché;
rembourrage: 10px;
marge: 0 auto;
Position: relative;
}
.recomm ul {
Border: 1px solide #ffff;
Border-Left: Aucun;
hauteur: 168px;
Largeur: 599px;
débordement: caché;
* Position: absolue; / * Résoudre le problème qui déborde: Hidden ne peut pas cacher correctement les éléments dans IE * /
}
.recomm li {
flottant: à gauche;
Position: relative;
marge-droite: -179px;
hauteur: 100%;
débordement: caché;
Espace blanc: Nowrap;
Texte-aligne: Centre;
}
.recomm li img {
Affichage: bloc;
Border-Left: 1px solide #ffff;
Largeur: 248px;
hauteur: 168px;
}
.recomm li H5 {
Position: absolue;
en bas: 0;
à gauche: 0;
hauteur: 20px;
Largeur: 239px;
hauteur de ligne: 20px;
Contexte: URL (../ images / 1_211621.png) sans répétition;
Affichage: aucun;
Texte-aligne: à droite;
Padding-droite: 10px;
taille de police: 1em;
Police-poids: normal;
}
.recomm Li: Hover, .remomm .lay-on {
Largeur: 249px;
marge-droite: 0;
}
.recomm Li: Hover H5, .recomm .lay-on H5 {
Affichage: bloc;
}
</ style>
</ head>
<body>
<div>
<ul>
<li> <a href = "/"> <img src = "/ images / m01.jpg" /> </a>
<h5> Red Feats Passing Love By <a href = "/"> Code Home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/ images / m02.jpg" /> </a>
<h5> Les fleurs sauvages fleurissent par <a href = "/"> shanshan film et télévision en ligne </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/ images / m03.jpg" /> </a>
<h5> Le passé est comme le thé par <a href = "/"> Code Home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/ images / m04.jpg" /> </a>
<h5> Richer des fleurs fleurissant par <a href = "/"> film coloré et télévision </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/ images / m05.jpg" /> </a>
<h5> Rose Love by <a href = "/"> Code Home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/ images / m09.jpg" /> </a>
<h5> Little Daisy par <a href = "/"> Shanshan Film and Television </a> 2010.09.23 </h5>
</li>
</ul>
</div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.