Cet article décrit la méthode de JS + CSS pour réaliser l'affichage de gradient de la couche div inductif de la souris. 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>
<Title> Div Layer implémenté par JS + CSS pour détecter l'affichage dégradé de la souris </Title>
<style>
#conseil{
Position: absolue;
Gauche: 90px;
Largeur: 0px;
hauteur: 0px;
Couleur: #FFF;
taille de police: 12px;
Color d'arrière-plan: # 000;
Border: 1px solide #DEF;
filtre: alpha (opacité = 0);
Opacité: 0;
Z-Index: 999;
}
</ style>
<script type = "text / javascript">
<! -
// Définissez la fonction pour "obtenir le nœud Dom spécifié" car son taux de réutilisation est élevé
fonction $ (d) {return document.getElementById (d);}
// Contrôlez Div pour afficher progressivement
var i = 0;
fonction change_show () {
var obj = $ ("TIP");
i = i + 5; // affiche progressivement la vitesse
obj.style.filter = "alpha (opacity =" + i + ")"; // La transparence diminue progressivement
obj.style.opacity = i / 100; // compatible avec Firefox
if (i> = 100) {
ClearInterval (s);
i = 0;
}
}
// Contrôle Div disparaît progressivement
var j = 100;
fonction change_hidden () {
var obj = $ ("TIP");
J = J-5; // disparaît progressivement
obj.style.filter = "alpha (opacity =" + j + ")"; // La transparence augmente progressivement
obj.style.opacity = j / 100; // compatible avec Firefox
if (j <= 0) {
ClearInterval (H);
//obj.style.display="none ";
J = 100;
}
}
// Contrôle Change_show () Comportement
var s;
fonction show (x) {
if (s) {ClearInterval (s);}
$ ("TIP"). Style.display = "Block";
S = setInterval (Change_show, 1);
}
// Contrôle Change_Hidden () Comportement
fonction cachée (x) {
$ ("TIP"). innerhtml = "";
h = setInterval (Change_Hidden, 1);
}
// ->
</cript>
</ head>
<body>
<div id = "tip" style = "background-color: bleu; largeur: 48%; hauteur: 48%;" onMouseOver = "show (this);" onMouseout = "Hidden (this);">
</div>
<br />
<br> Les diapositives de la souris ici, l'affichage du gradient de couche Div est affiché <br> <hr> collecté sur Internet, uniquement pour l'intérêt et l'apprentissage de la communication, et non à des fins commerciales. </font> </p>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.