js animation learning (4)

7. Multi-attribute encapsulation function



We have previously introduced the animation of changing the value of a single attribute separately. From this section on, we will introduce the multi-attribute encapsulation function. One function can handle multiple attribute values. changes.

First introduce a very important function getStyle(), this function returns the current attribute value of an element. The two formal parameters are elements and attributes. Pay attention to browser compatibility issues.

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

The next point is, a function realizes the animation of changing multiple attributes:

//多物体改变样式(宽，高，字体大小，边框等，透明度需单独分析）速度缓冲封装函数
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)
}

Let’s verify it through two divs:

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

This way This is achieved by changing the width and transparency of the object through a startMove() function.



8. Chain Movement



#What we have mentioned above is that an event triggers a movement. This section introduces the width, height, and width of a div. Chain movement of transparency. Based on the above startMove function, add a formal parameter fn as a callback function; add a judgment inside the program to detect whether the movement has stopped: if(fn) fn(); in line 18 of the code:

//多物体改变样式(宽，高，字体大小，边框等，透明度单独分析）速度缓冲封装函数
 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)
 }

The following is a simple div

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

Pay attention to the function nesting in the js part:

<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);
             })
         });
     }
 }

The order of changes when the mouse leaves is opposite to when the mouse passes.

The above is the content of js animation learning (4). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!