js animation apprentissage (1)

1. Idées de mise en œuvre du cadre de mouvement

1. Mouvement uniforme (les valeurs des attributs changent à une vitesse uniforme) (changement à gauche, à droite, en largeur, en hauteur, en opacité, etc.) ; 🎜>2. Mouvement du tampon (la vitesse de changement de la valeur de l'attribut est proportionnelle à la différence entre la valeur actuelle et la valeur cible) ;

3. Modification de n'importe quelle valeur d'attribut (en utilisant la fonction d'encapsulation) ;

5. Mouvement en chaîne (le même objet effectue une série de mouvements

6.
============== ================================= ======

2. Exercices simples Mouvement uniforme

La fonction suivante est le cadre de base de la fonction série de mouvements.


Par exemple :

Appelez la fonction JS ci-dessus dans le document HTML ci-dessous

//鼠标移到元素上元素右移，鼠标离开元素回去。 
    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)
    }

Changer la transparence d'une animation simple

est fondamentalement le même que celui de la section précédente. La différence est que l'élément n'a pas son propre attribut de transparence et que la valeur initiale de la transparence doit être définie en premier.

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

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

Citer la fonction JS ci-dessus dans le document HTML ci-dessous pour modifier la transparence

Ce qui précède est le contenu de l'apprentissage de l'animation js (1), plus Pour contenu associé, veuillez faire attention au site Web PHP chinois (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 }

1 <style type="text/css">
 2     *{
 3         margin: 0;
 4         padding: 0;
 5     }
 6     #div1{
 7         width: 200px;
 8         height: 200px;
 9         background: red;
10         filter: alpha(opacity:30);/*filter滤镜：不透明度,IE浏览器*/ 
11         opacity: 0.3;/*火狐和谷歌*/
12     }
13 </style>

1 <div id="div1"></div>
 2 <script type="text/javascript">
 3     window.onload=function(){
 4         var div1=document.getElementById(&#39;div1&#39;);
 5         div1.onmouseover=function(){
 6             changeOpacity(10,100);
 7         }
 8         div1.onmouseout=function(){
 9             changeOpacity(-10,30);
10         }
11     }