JS et CSS réalisent le pop-up d'une boîte DIV avec effet de dégradé d'animation tamponné au passage de la souris-js tutoriel-php.cn

JS et CSS réalisent le pop-up d'une boîte DIV avec effet de dégradé d'animation tamponné au passage de la souris

不言

Libérer： 2018-06-25 11:00:55

original

2116 Les gens l'ont consulté

Cet article présente principalement la méthode d'implémentation de JS+CSS pour faire apparaître une boîte p après le passage de la souris, avec un effet d'animation de dégradé tamponné, impliquant la réponse aux événements de la souris et les compétences associées pour combiner le déclenchement du timing de la fonction temporelle pour former un effet de dégradé d'animation, qui sont nécessaires Les amis peuvent se référer à

Cet article décrit l'exemple de JS+CSS pour obtenir l'effet de faire apparaître une boîte p lorsque la souris passe. 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);}
//控制p逐渐显示
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;
}
}
//控制p逐渐消失
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>
鼠标滑过这里，渐变出现
<p id="tip" style="background-color:blue;width:48%;height:48%;" onmouseover="show();" onmouseout="hiddentip();">
</p>
</body>
</html>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. utile à l'étude de chacun. Plus connexe Veuillez faire attention au site Web PHP chinois pour le contenu !

Recommandations associées :

Utiliser CSS et js pour obtenir l'effet des onglets Web

Comment implémenter APPLE basé sur Effet de parallaxe des affiches CSS3 et jQuery TV

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!