Dieser Artikel beschreibt die Methode zur Implementierung der Bildanzeige von Maussensen durch JS. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! 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">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<title> Mauserfassung Bild Display -Effekt </title>
<!-[wenn lte dh 6]>
<script Language = "JavaScript">
var w3cdom = (document.createelement () && document.getElementsByTagName ());
window.onload = pinballeffect;
Funktion pinballeffect ()
{
if (! w3cdom) kehren Sie zurück;
var AllElements = document.getElementsByTagName ('*');
var originalbackgrounds = new Array ();
für (var i = 0; i <allelements.length; i ++)
{
if (AllElements [i] .ClassName.Indexof ('Hovereffect)> = 0)
{
Allelemente [i] .onmouseover = mousegoesover;
Allelemente [i] .onmouseout = mousegoesout;
}
}
}
Funktion mousegoesover ()
{
originalClassnamestring = this.className;
this.className += "lay-on";
}
Funktion mousegoesout ()
{
this.className = originalClassnamestring;
}
pinballeffect ();
</script>
<! [endif]->
<style type = "text/css">
Körper {
Hintergrund: #fff;
Schriftart: klein/1,5 "安体", Simsun, Serif;
_font-Größe: Medium;
}
ein IMG {
Grenze: Keine;
}
ul, ul,
li,
H5 {
Listenstil: Keine im Inneren;
Rand: 0;
Polsterung: 0;
}
.Recomm {
Hintergrund:#999;
Grenze: 1PX Solid #666;
Breite: 600px;
Höhe: 170px;
Überlauf: versteckt;
Polsterung: 10px;
Rand: 0 Auto;
Position: Relativ;
}
.Recomm ul {
Grenze: 1PX Solid #ffff;
Border-Links: Keine;
Höhe: 168px;
Breite: 599px;
Überlauf: versteckt;
*Position: absolut; /* Lösen Sie das Problem, das Überlauf: Hidden kann Elemente in IE*/////////
}
.Recomm li {
float: links;
Position: Relativ;
Rand-Rechts: -179px;
Höhe: 100%;
Überlauf: versteckt;
weißer Raum: Nowrap;
Text-Align: Mitte;
}
.Recomm li img {
Anzeige: Block;
Border-Links: 1PX Solid #ffff;
Breite: 248px;
Höhe: 168px;
}
.Recomm li h5 {
Position: absolut;
unten: 0;
links: 0;
Höhe: 20px;
Breite: 239px;
Zeilenhöhe: 20px;
Hintergrund: URL (../ Images/1_211621.png) No-Repeat;
Anzeige: Keine;
Text-Align: Recht;
Padding-Right: 10px;
Schriftgröße: 1EM;
Schriftgewicht: normal;
}
.Recomm li: Hover, .Recomm .Lay-on {
Breite: 249px;
Rand-Rechts: 0;
}
.Recomm li: Hover H5, .Recomm .Lay-on H5 {
Anzeige: Block;
}
</style>
</head>
<body>
<div>
<ul>
<li> <a href = "/"> <img src = "/images/m01.jpg"/> </a>
<h5> rote Blätter passieren die Liebe durch <a href = "/"> Code Home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m02.jpg"/> </a>
<h5> Wildblumen blühen von <a href = "/"> Shanshan Film und Fernsehen online </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m03.jpg"/> </a>
<h5> Die Vergangenheit ist wie Tee von <a href = "/"> Code Home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m04.jpg"/> </a>
<h5> Blütenblüten blühen durch <a href = "/"> farbenfrohe Film und Fernsehen </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m05.jpg"/> </a>
<h5> Rose Love von <a href = "/"> Code Home </a> 2010.09.23 </h5>
</li>
<li> <a href = "/"> <img src = "/images/m09.jpg"/> </a>
<h5> Little Daisy von <a href = "/"> Shanshan Film und Fernsehen </a> 2010.09.23 </h5>
</li>
</ul>
</div>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.