Dieses Mal werde ich Ihnen JS zur Implementierung der Transparenzverlaufsfunktion vorstellen. Was sind die Vorsichtsmaßnahmen für JS zur Implementierung der Transparenzverlaufsfunktion?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS透明度变化效果</title>
<style>
body{
margin: 0px;
padding: 0px;
}
.redb{
width:200px;
height: 200px;
background: red;
filter:alpha(opacity=30);
opacity: 0.3;
}
</style>
</head>
<body>
<p class="redb" id="opbtn"></p>
<script>
window.onload = function(){
var opp = document.getElementById("opbtn");
opp.onmouseover = function(){
startMove(100);
}
opp.onmouseout = function(){
startMove(30);
}
}
var timer = null;
var alpha = 30;
var speed = 0;
function startMove(opTarget){
clearInterval(timer);
var opp = document.getElementById("opbtn");
timer = setInterval(function(){
if(alpha<opTarget){
speed = 10;
}
else if(alpha>opTarget){
speed = -10;
}
if(alpha==opTarget){
clearInterval(timer);
}
else{
alpha += speed;
opp.style.opacity = alpha/100;
opp.style.filter = 'alpha(opacity='+alpha+')';
}
},100);
}
</script>
</body>
</html>Zusammenfassung:
1. Der Unterschied zwischen Filter und Deckkraft: W3c-Standardtransparenz ist Deckkraft, Filter kann nur vom IE verwendet werden, andere Browser unterstützen Deckkraft
2 . Beim Ändern der Transparenz kann der Transparenzwert nicht über eine Methode wie offsetLeft ermittelt werden, daher müssen Sie eine separate Variable
erstellen. 3. Vergessen Sie nicht, den Wert von Timer zuzuweisen zum Timer
Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Eine Zusammenfassung der Verwendung von Watch in Vue
jQuery sorgt dafür, dass der Schleifenzeitstil automatisch geändert wird Funktion
Das obige ist der detaillierte Inhalt vonJS implementiert die Transparenzgradientenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
