Maison > Article > interface Web > JS+CSS réalise un exemple complet d'affichage d'une boîte DIV après le passage de la souris (avec effet de dégradé d'animation en mémoire tampon)_compétences javascript

JS+CSS réalise un exemple complet d'affichage d'une boîte DIV après le passage de la souris (avec effet de dégradé d'animation en mémoire tampon)_compétences javascript

WBOYoriginal: 2016-05-16 15:08:161598parcourir

L'exemple de cet article décrit l'effet de JS+CSS pour faire apparaître une boîte DIV lorsque la souris passe dessus. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js+CSS实现表格渐变</title>
<style>
#tip{
position:absolute;
left:90px;
width:0px;
height:0px;
color:#FFF;
font-size:12px;
background-color:#000;
border:1px solid #DEF;
filter:Alpha(Opacity=0);
opacity:0;
z-index:999;
}
</style>
<script type="text/javascript">
<!--
//定义“获得指定dom节点”的函数，因为其重用率高
function $(d){return document.getElementById(d);}
//控制div逐渐显示
var i = 0;
function change_show(){
var obj = $("tip");
i=i+5; //逐渐显示速度
obj.style.filter = "Alpha(Opacity=" + i + ")"; //透明度逐渐变小
obj.style.opacity = i/100; //兼容FireFox
if(i>=100){
clearInterval(s);
i=0;
}
}
//控制div逐渐消失
var j = 100;
function change_hidden(){
var obj = $("tip");
j=j-5; //逐渐消失速度
obj.style.filter = "Alpha(Opacity=" + j + ")"; //透明度逐渐变大
obj.style.opacity = j/100; //兼容FireFox
if(j<=0){
clearInterval(h);
//obj.style.display="none";
j=100;
}
}
//控制change_show()行为
var s;
function show(){
if(s){clearInterval(s);}
$("tip").style.display="block";
s = setInterval(change_show,1);
}
//控制change_hidden()行为
var h;
function hiddentip(){
$("tip").innerHTML="";
h = setInterval(change_hidden,1);
}
//-->
</script>
</head>
<body>
鼠标滑过这里，渐变出现
<div id="tip" style="background-color:blue;width:48%;height:48%;" onmouseover="show();" onmouseout="hiddentip();">
</div>
</body>
</html>

PS :Le code ci-dessus n'a pas été formaté Pour cette raison, l'éditeur met à votre disposition un outil de compression, de formatage et de cryptage en ligne du code js sur ce site. très puissant et pratique :

Outil de compression/formattage/chiffrement JavaScript : http://tools.jb51.net/code/jscompress

La fonction de cryptage dans l'outil js ci-dessus peut réaliser la forme de cryptage de la fonction eval du code js À cet égard, ce site fournit également l'outil de décryptage suivant pour le cryptage de la fonction eval, qui est très puissant et. pratique!

Outil de cryptage et de décryptage en ligne de la méthode d'évaluation js : http://tools.jb51.net/password/evalencode

Les lecteurs intéressés par davantage de contenu lié à JavaScript peuvent consulter les sujets spéciaux sur ce site : "Résumé des techniques d'algorithme de recherche JavaScript", "Résumé des effets et techniques spéciaux d'animation JavaScript ", "Résumé des erreurs JavaScript et des techniques de débogage", "Résumé des structures de données JavaScript et des techniques d'algorithme", "Résumé des algorithmes et techniques de traversée JavaScript" et "Résumé mathématique JavaScript de l'utilisation des opérations》

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：js+css réalise l'effet d'embellissement des compétences select_javascriptArticle suivant：js+css réalise l'effet d'embellissement des compétences select_javascript

Articles Liés

Voir plus