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< Die Das Modell der Funktion 🎜>

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 }