Dieser Artikel beschreibt die Methode von JS+CSS, um die Gradientenanzeige der Div -Schicht zu realisieren, die die Maus induziert. 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>
<title> Div -Schicht von JS+CSS implementiert, um die Gradientenanzeige von Maus </title> zu erfassen
<Styles>
#Tipp{
Position: absolut;
Links: 90px;
Breite: 0px;
Höhe: 0px;
Farbe: #fff;
Schriftgröße: 12px;
Hintergrundfarbe:#000;
Grenze: 1PX Solid #def;
Filter: Alpha (Opazität = 0);
Deckkraft: 0;
Z-Index: 999;
}
</style>
<script type = "text/javaScript">
<!-
// Definieren Sie die Funktion, um "den angegebenen DOM -Knoten zu erhalten", da ihre Wiederverwendungsquote hoch ist
Funktion $ (d) {return document.getElementById (d);}
// Steuerungsdiv zum allmählich angezeigt werden
var i = 0;
Funktion Change_show () {
var obj = $ ("Tipp");
i = i+5; // Zeigen Sie die Geschwindigkeit nach und nach an
obj.style.filter = "alpha (opacity =" + i + ")"; // Die Transparenz nimmt allmählich ab
obj.style.opacity = i/100; // mit Firefox kompatibel
if (i> = 100) {
ClearInterval (s);
i = 0;
}
}
// Control Div verschwindet allmählich
var J = 100;
Funktion Change_hidden () {
var obj = $ ("Tipp");
J = J-5; // allmählich verschwindet die Geschwindigkeit
obj.style.filter = "alpha (opacity =" + j + ")"; // Die Transparenz nimmt allmählich zu
obj.style.opacity = j/100; // mit Firefox kompatibel
if (j <= 0) {
ClearInterval (h);
//obj.style.display="none ";
J = 100;
}
}
// Kontrolle Change_show () Verhalten
var S;
Funktionshow (x) {
if (s) {ClearInterval (s);}
$ ("Tipp"). style.display = "block";
s = setInterval (Change_show, 1);
}
// Kontrolle Change_hidden () Verhalten
Funktion versteckt (x) {
$ ("Tipp"). Innerhtml = "";
H = setInterval (Change_hidden, 1);
}
//->
</script>
</head>
<body>
<div id = "Tipp" style = "Hintergrundfarbe: Blau; Breite: 48%; Höhe: 48%;" Onmouseover = "Show (this);" Onmouseout = "Hidden (this);">
</div>
<br />
<br> Die Maus gleitet hier, die Div -Layer -Gradientenanzeige wird angezeigt. </font> </p>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.