Heim > Artikel > Web-Frontend > js-Methode zum Erzielen von Transparenzgradienteneffekten_Javascript-Fähigkeiten

js-Methode zum Erzielen von Transparenzgradienteneffekten_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 16:05:061717Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie man in js einen Transparenzverlaufseffekt erzielt. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Hier können Sie erkennen, dass die Transparenz des Elements zu Beginn 30 beträgt. Wenn Sie mit der Maus darüber fahren, erhöht sich die Transparenz langsam und stoppt, wenn die Transparenz 100 erreicht. Beim Herausbewegen der Maus verringert sich die Transparenz langsam auf 30.

Punkt 1: Da der Transparenzwert nicht direkt ermittelt und geändert werden kann, können Sie den Transparenzwert einer Variablen zuweisen, die Variable ändern lassen und schließlich den Variablenwert dem Transparenzwert des Elements zuweisen.

var alpha=30;

Punkt 2: Beurteilen Sie den Zielwert und den aktuellen Transparenzwert, um festzustellen, ob es sich um eine positive oder negative Geschwindigkeit handelt.

if(target > alpha){
speed = 2;
}else{
speed = -2;
}

Punkt 3: Wenn der Transparenzwert den Zielwert erreicht, schalten Sie den Timer aus, sonst ändert sich der Transparenzwert weiter. Abschließend wird dem Element der Wert zugewiesen. Da es bei der Transparenz Kompatibilitätsprobleme gibt, sind zwei Schreibmethoden erforderlich.

if(alpha == target){
clearInterval(timer);
}
else{
alpha = alpha + speed;
run.style.filter = 'alpha(opacity='+alpha+')';
run.style.opacity = alpha/100;
document.title = alpha;
}

Zum Schluss fügen Sie den Code hinzu:

<!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>无标题文档</title>
<style>
body{margin:0; padding:0;}
#run{width:100px; height:100px; background:#06c;
position:absolute; border:1px solid #000;
opacity:0.3; filter:alpha(opacity=30);}
</style>
<script>
window.onload = function(){
 var run = document.getElementById("run");
 var btn = document.getElementById("btn");
 var speed = 1;
 var timer = null;
 var alpha=30;
 run.onmouseover = function(){
  startrun(100);
 }
 run.onmouseout = function(){
  startrun(30);
 }
 function startrun(target){
  clearInterval(timer);
  timer = setInterval(function(){
   if(target > alpha){
    speed = 2;
   }else{
    speed = -2;
   }
   if(alpha == target){
    clearInterval(timer);
   }
   else{
    alpha = alpha + speed;
    run.style.filter = 'alpha(opacity='+alpha+')';
    run.style.opacity = alpha/100;
    document.title = alpha;
   }
  },30)
 }
}
</script>
</head>
<body>
<div id="run"></div>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

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：js einfach klicken Zurück zum Anfang Effekt Implementierungsmethode_Javascript-FähigkeitenNächster Artikel：js einfach klicken Zurück zum Anfang Effekt Implementierungsmethode_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen