js-Methode, um mehrere Farbverlaufseffekte auf derselben Seite zu erzielen_Javascript-Fähigkeiten-js-Tutorial-php.cn

js-Methode, um mehrere Farbverlaufseffekte auf derselben Seite zu erzielen_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 16:04:53

Original

1165 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie man mit js mehrere Verlaufseffekte auf derselben Seite implementiert. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Hier können Sie den Effekt jedes der 5 Elemente erzielen. Wenn die Maus nach oben bewegt wird, nimmt die Transparenz allmählich zu, und wenn die Maus nach außen bewegt wird, nimmt die Transparenz allmählich ab.

Punkt 1:

var speed = 0;
if(target>obj.alpha){
speed = 5;
}else{
speed = -5;
}

Nach dem Login kopieren

Bestimmen Sie anhand des Vergleichs zwischen dem Zielwert und dem aktuellen Wert, ob die Geschwindigkeit positiv oder negativ ist.

Punkt 2:

for(i=0; i<runs_li.length; i++){
runs_li[i].timer = null;
runs_li[i].alpha = 30;
runs_li[i].onmouseover = function(){
startrun(this,100);
}
runs_li[i].onmouseout = function(){
startrun(this,30);
}
}

Nach dem Login kopieren

Fügen Sie jedem Element einen eigenen Transparenzwert hinzu und trennen Sie seine Transparenzänderungen.

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,ul,li{margin:0; padding:0;}
#runs{width:300px; margin:10px auto;}
#runs li{width:80px; height:80px; background:#06c; list-style:none;
float:left; margin:10px; display:inline;
filter:alpha(opacity=30); opacity:0.3;}
</style>
<script>
window.onload = function(){
 var runs = document.getElementById("runs");
 var runs_li = runs.getElementsByTagName("li");
 var i=0; 
 for(i=0; i<runs_li.length; i++){
 runs_li[i].timer = null;
 runs_li[i].alpha = 30;
 runs_li[i].onmouseover = function(){
  startrun(this,100);
 }
 runs_li[i].onmouseout = function(){
  startrun(this,30);
 }
 }
}
function startrun(obj,target){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var speed = 0;
 if(target>obj.alpha){
  speed = 5;
 }else{
  speed = -5;
 }
 
 if(obj.alpha == target){
  clearInterval(obj.timer);
 }else{
  obj.alpha = obj.alpha + speed;
  obj.style.filter = "alpha(opacity="+obj.alpha+")";
  obj.style.opacity = obj.alpha/100;
 }
 
 },30)
}
</script>
</head>
<body>
<ul id="runs">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
</ul>
</body>
</html>

Nach dem Login kopieren

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