js-Methode zum Erzielen von Transparenzgradienteneffekten_Javascript-Fähigkeiten-js-Tutorial-php.cn

js-Methode zum Erzielen von Transparenzgradienteneffekten_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:05:06

Original

1720 Leute haben es durchsucht

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;

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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