js animation apprentissage (4)

7. Fonction d'encapsulation multi-attributs



Dans la section précédente, nous avons introduit l'animation de modification de la valeur d'un seul attribut séparément. À partir de cette section, nous présenterons la fonction d'encapsulation multi-attributs. fonction d'encapsulation multi-attributs. Une fonction peut gérer plusieurs valeurs d'attribut.

Introduisez d'abord une fonction très importante getStyle(), cette fonction renvoie la valeur d'attribut actuelle d'un élément. Les deux paramètres formels sont des éléments et des attributs. Faites attention aux problèmes de compatibilité du navigateur.

//获得元素样式专用封装函数，返回该属性的当前值
 function getStyle(obj,attr) {
     if (obj.currentStyle) {//IE浏览器
         return obj.currentStyle[attr];
     } else {
         return getComputedStyle(obj,false)[attr];//火狐浏览器
     }
 }

Le point suivant est qu'une fonction implémente l'animation de modification de plusieurs attributs :

//多物体改变样式(宽，高，字体大小，边框等，透明度需单独分析）速度缓冲封装函数
function startMove(obj,attr,target) {//元素，改变的样式属性，达到的目标值
    clearInterval(obj.timer);//首先清除定时器
    obj.timer=setInterval(function(){
        //1.取当前值
        var icur=0;//icur返回物体样式属性值的大小
        if (attr=='opacity') {//如果属性是透明度，透明度的返回值是零点几的小数
            icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动
        } else {
            icur=parseInt(getStyle(obj,attr));
        }
        //2.算速度
        var speed=(target-icur)/8;//分母为比例系数K，可调
        speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整，不然移动不到终点就停止
        //3.检测运动是否停止
        if (icur==target) {
            clearInterval(obj.timer);
        } else {
            if (attr=='opacity') {
                obj.style.filter='alpha(opacity:'+(icur+speed)+')';//IE浏览器
                obj.style.opacity=(icur+speed)/100;//火狐浏览器
            } else {
                obj.style[attr]=icur+speed+'px';
            }
        }
    },30)
}

Vérifions-le à travers deux div :

<style type="text/css">
     #div1,#div2{
         width: 200px;
         height: 200px;
         background: red;
         border: 1px solid black;
         margin-bottom: 10px;
     }
 </style>

<div id="div1"></div>
 <div id="div2"></div>
 <script type="text/javascript">
 window.onload=function(){
     var ob1=document.getElementById(&#39;div1&#39;);
     var ob2=document.getElementById(&#39;div2&#39;);
     ob1.onmouseover=function(){
         startMove(this,&#39;width&#39;,400);
     }
     ob1.onmouseout=function(){
         startMove(this,&#39;width&#39;,200);
     }
     
     ob2.onmouseover=function(){
         startMove(this,&#39;opacity&#39;,31);
     }
     ob2.onmouseout=function(){
         startMove(this,&#39;opacity&#39;,100);
     }
     //alert(parseFloat(0.07*100));弹出7.00000000001而不是7    所以上面程序中的parseFloat前加四舍五入Math.round函数
 }
 </script>

De cette façon, la largeur et la transparence de l'objet peuvent être modifiées via une fonction startMove().



8. Mouvement de la chaîne



Ce dont nous avons parlé ci-dessus, c'est qu'un événement déclenche un mouvement. Cette section présente la largeur, la hauteur et. largeur d'un div. Mouvement de chaîne de transparence. Sur la base de la fonction startMove ci-dessus, ajoutez un paramètre formel fn comme fonction de rappel ; ajoutez un jugement à l'intérieur du programme pour détecter si le mouvement s'est arrêté : if(fn) fn(); 🎜>

Ce qui suit est un simple div

//多物体改变样式(宽，高，字体大小，边框等，透明度单独分析）速度缓冲封装函数
 function startMove(obj,attr,target,fn) {//元素，改变的样式属性，达到的目标值，回调函数
     clearInterval(obj.timer);
     obj.timer=setInterval(function(){
         //1.取当前值
         var icur=0;//icur返回物体样式属性值的大小
         if (attr=='opacity') {//如果属性是透明度，透明度的返回值是零点几的小数
             icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动
         } else {
             icur=parseInt(getStyle(obj,attr));
         }
         //2.算速度
         var speed=(target-icur)/8;//分母为比例系数K，可调
         speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整，不然移动不到终点就停止
         //3.检测运动是否停止
         if (icur==target) {
             clearInterval(obj.timer);
             if(fn){//上一个运动停止后判断一下是否还有下一个运动，如果有的话就执行回调函数
                 fn();
             }
         } else {
             if (attr=='opacity') {
                 obj.style.filter='alpha(opacity:'+(icur+speed)+')';//IE浏览器
                 obj.style.opacity=(icur+speed)/100;//火狐浏览器
             } else {
                 obj.style[attr]=icur+speed+'px';
             }
         }
     },30)
 }

Faites attention à l'imbrication des fonctions dans la partie js :

<style type="text/css">
     #div1{
         width: 200px;
         height: 200px;
         background: red;
         border: 2px solid black;
         filter: alpha(opacity:30);
         opacity: 0.3;
     }
 </style>

L'ordre des changements lorsque la souris quitte est le à l'opposé du passage de la souris.

<div id="div1"></div>
 <script type="text/javascript">
 window.onload=function(){
     var ob1=document.getElementById(&#39;div1&#39;);
     ob1.onmouseover=function(){
         startMove(ob1,&#39;width&#39;,400,function(){
             startMove(ob1,&#39;height&#39;,400,function(){
                 startMove(ob1,&#39;opacity&#39;,100);
             })
         });
     }
     ob1.onmouseout=function(){
         startMove(ob1,&#39;opacity&#39;,30,function(){
             startMove(ob1,&#39;height&#39;,200,function(){
                 startMove(ob1,&#39;width&#39;,200);
             })
         });
     }
 }

Ce qui précède est le contenu de l'apprentissage de l'animation js (4). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !