js-Animationslernen (1)

1. Ideen zur Umsetzung des Bewegungsrahmens

1. Gleichmäßige Bewegung (Attributwerte ändern sich mit gleichmäßiger Geschwindigkeit) (Änderung nach links, rechts, Breite, Höhe, Deckkraft usw.); 🎜>2. Pufferbewegung (Die Änderungsgeschwindigkeit des Attributwerts ist proportional zur Differenz zwischen dem aktuellen Wert und dem Zielwert); Änderung eines beliebigen Attributwerts (mithilfe der Kapselungsfunktion);

5. Dasselbe Objekt führt eine Reihe von Bewegungen aus

6
============== ================================ ======

2. Einfache Übungen Gleichmäßige Bewegung

Die folgende Funktion ist das Grundgerüst der Bewegungsreihenfunktion.


Zum Beispiel:

Rufen Sie die obige JS-Funktion im folgenden HTML-Dokument auf

//鼠标移到元素上元素右移，鼠标离开元素回去。 
    var timer="";
    function Move(speed,locat) {//移动速度，移动终点位置
        var ob=document.getElementById('box1');
        clearInterval(timer);//先清除定时器，防止定时器的嵌套调用
        timer=setInterval(function () {
            if (ob.offsetLeft==locat) {//当前位置到达指定终点，关闭定时器
                clearInterval(timer);
            } else {//否则元素的left属性等于当前left加上每次改变的速度
               ob.style.left=ob.offsetLeft+speed+'px';
           }
        }, 30)
    }

3. Ändern der Transparenz einfacher Animationen

ist grundsätzlich das gleiche wie im vorherigen Abschnitt. Der Unterschied besteht darin, dass das Element kein eigenes Transparenzattribut hat und der Anfangswert der Transparenz zuerst definiert werden muss.

<style type="text/css">
     *{
         margin: 0;
         padding: 0;
     }
     
     #box1{
         width: 200px;
         height: 200px;
         background-color: red;
         position: absolute;
         left: 0;
     }
  </style>

Zitieren Sie die obige JS-Funktion im HTML-Dokument unten, um die Transparenz zu ändern

<div id="box1"></div>
 <script type="text/javascript">
     window.onload=function(){
         var ob=document.getElementById(&#39;box1&#39;);
         ob.onmouseover=function(){
             Move(10,200);//鼠标移到div上时div从0移到200
         }  
         ob.onmouseout=function(){
             Move(-10,0);//鼠标移走时div从200移到0
         }  
     }
 </script>

Das Obige ist der Inhalt des JS-Animationslernens (1), mehr Für Für verwandten Inhalt beachten Sie bitte die chinesische PHP-Website (www.php.cn)!

1 var timer="";
 2 var alpha=30;//透明度初始值
 3 function changeOpacity(speed,target) {
 4     var div1=document.getElementById('div1');//获取改变透明度的元素
 5     clearInterval(timer);//清除定时器，避免嵌套调用
 6     timer=setInterval(function () {
 7         if (alpha==target) {//如果透明度达到目标值，清除定时器
 8             clearInterval(timer);
 9         } else {//当前透明度加上透明度变化的速度
10             alpha=alpha+speed;
11             div1.style.filter='alpha(opacity:'+alpha+')';//IE浏览器
12             div1.style.opacity=alpha/100; //火狐和谷歌
13         }
14     }, 30)
15 }