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

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

WBOY

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

Original

1157 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode, mit js mehrere verschiedene Bewegungseffekte auf derselben Seite zu erzielen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Punkt 1:

function getstyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}

Nach dem Login kopieren

Rufen Sie den Wert aus dem Stylesheet basierend auf der ID und dem Attributnamen ab.

Punkt 2:

if(attr == "opacity"){
cur = Math.round(parseFloat(getstyle(obj,attr))*100);
}else{
cur = parseInt(getstyle(obj,attr));
}

Nach dem Login kopieren

Wenn Sie einen Transparenzwert festlegen, müssen Sie parseFloat verwenden, da möglicherweise Dezimalstellen vorhanden sind. Verwenden Sie dann die Rundungsmethode.

Wenn Sie einen Nicht-Transparenzwert festlegen, verwenden Sie parseInt, um nur den numerischen Teil abzurufen

Weitere wichtige Punkte wurden in den vorherigen Artikeln erwähnt und werden hier nicht wiederholt.

Zum Schluss fügen Sie den Code hinzu:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0;}
#runs li{width:80px; height:80px; background:#06c;
list-style:none; margin:10px; border:1px solid #000;
filter:alpha(opacity=30); opacity:0.3;}
</style>
<script>
window.onload = function(){
 var runs = document.getElementById("runs");
 var runs_li = runs.getElementsByTagName("li");
  runs_li[0].onmouseover = function(){
   startrun(this,"width",300);
  }
  runs_li[0].onmouseout = function(){
   startrun(this,"width",80);
  }
  runs_li[1].onmouseover = function(){
   startrun(this,"height",300);
  }
  runs_li[1].onmouseout = function(){
   startrun(this,"height",80);
  }
  runs_li[2].onmouseover = function(){
   startrun(this,"fontSize",50);
  }
  runs_li[2].onmouseout = function(){
   startrun(this,"fontSize",14);
  }
  runs_li[3].onmouseover = function(){
   startrun(this,"opacity",100);
  }
  runs_li[3].onmouseout = function(){
   startrun(this,"opacity",30);
  }
}
function startrun(obj,attr,target){
 clearInterval(obj.timer);
 obj.timer = setInterval(function(){
 var cur = 0;
 if(attr == "opacity"){
  cur = Math.round(parseFloat(getstyle(obj,attr))*100);
 }else{
  cur = parseInt(getstyle(obj,attr));
 }
 var speed = (target - cur)/8;
 speed = speed>0&#63;Math.ceil(speed):Math.floor(speed);
  
  if(cur == target){
   clearInterval(obj.timer);
  }else{
   if(attr == "opacity"){
    obj.style.filter='alpha(opacity='+(cur+speed)+')';
    obj.style.opacity=(cur+speed)/100;
   }else{
    obj.style[attr] = cur+speed+"px";
   }
  }
 },30);
}
function getstyle(obj,name){
 if(obj.currentStyle){
  return obj.currentStyle[name];
 }else{
  return getComputedStyle(obj,false)[name];
 }
}
</script>
</head>
<body>
<ul id="runs">
 <li style="top:0">1</li>
 <li style="top:90px;">2</li>
 <li style="top:180px;">3</li>
 <li style="top:270px;">4</li>
</ul>
</body>
</html>

Nach dem Login kopieren

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