Heim > Artikel > Web-Frontend > JS und CSS realisieren das Popup einer DIV-Box mit gepuffertem Animationsverlaufseffekt, wenn die Maus vorbeifährt

JS und CSS realisieren das Popup einer DIV-Box mit gepuffertem Animationsverlaufseffekt, wenn die Maus vorbeifährt

不言Original: 2018-06-25 11:00:552060Durchsuche

In diesem Artikel wird hauptsächlich die Implementierungsmethode von JS + CSS vorgestellt, mit der nach dem Passieren der Maus ein P-Feld mit einem gepufferten Gradientenanimationseffekt angezeigt wird, der die Reaktion auf Mausereignisse und die damit verbundenen Fähigkeiten zum Kombinieren von Zeitfunktions-Timing-Triggern zur Bildung eines P-Felds umfasst Animationsverlaufseffekte, die benötigt werden. Freunde können sich auf das

-Beispiel in diesem Artikel über JS+CSS beziehen, um den Effekt zu erzielen, dass beim Passieren der Maus ein P-Feld angezeigt wird. Teilen Sie es als Referenz mit allen:

<!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>

Das Obige ist der gesamte Inhalt dieses Artikels Für weitere verwandte Inhalte folgen Sie bitte der chinesischen PHP-Website!

Verwandte Empfehlungen:

Verwenden von CSS und JS, um den Effekt von Webseiten-Registerkarten zu erzielen

So implementieren Sie APPLE-basiert auf CSS3 und jQuery TV-Poster-Parallaxeneffekt

Das obige ist der detaillierte Inhalt vonJS und CSS realisieren das Popup einer DIV-Box mit gepuffertem Animationsverlaufseffekt, wenn die Maus vorbeifährt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery css css3 JS 事件鼠标事件

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Analyse zur Verwendung von Formular und Navigationsleiste in BootstrapNächster Artikel：Analyse zur Verwendung von Formular und Navigationsleiste in Bootstrap

In Verbindung stehende Artikel

Mehr sehen