JS基础知识——运动框架

运动框架及应用
在开始运动时要关闭定时器
把运动和停止分割开(if/else)

缓冲运动
距离大速度大，距离小速度小
speed=(300-oDiv.offsetLeft)/10
像素只能精确到个位不能有小数点，会舍去小数点

Math类
Math.ceil 向上取整
Math.floor 向下取整

从左往右速度要向上取整
从右往左速度要向下取整

Math.round()四舍五入取整数

右下角悬浮框
    window.onscroll=function(){
         var oDiv.document.getElmentById('div1');
         var scrollTop=doucument.documentElement.scrollTop;

         oDiv.style.top=doucument.doucument.Element.clinetHeight-oDiv.offsetHeight+scrollTop+'px';
    }

多物体运动框架
var obj[i].timer=null
给每个标签都加一个定时器

多物体不能有公用属性

offsetWidth BUG:会算入盒模型的整体宽度，做运动的时候要谨慎处理，最好在行间样式写width直接获取其宽度来做运动

    function startMove(obj,attr,iTarget){
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){

            var cur=0;
            if(attr=='opacity'){
                cur=Math.round(parseFloat(getStyle(obj,attr))*100);
            }
            else{
                cur=parseInt(getStyle(obj,attr));
            }

            var speed=(iTarget-cur)/6;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(cur==iTarget){
                clearInterval(obj.timer);
            }
            else{
                if(attr=='opacity'){
                    obj.style.filter='alpha(opacity:(cur+speed))';
                    opacity=(cur+speed)/100;
                }
                else{
                    obj.style[attr]=cur+speed+'px';
                }
                
            }
        },30)
    } ;

    function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];
        }
        else{
            return getComputedStyle(obj,false)[name];
        }
    }

改进:function startMove(obj,attr,iTarget,fnEnd)
//fnEnd是指执行完此运动之后继续执行的函数

完美运动框架

        // strartMove(oDiv,{width:400,height:500})

        function startMove(obj,json,fnEnd){
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            for(var attr in json){
                var isStop=true;

                var cur=0;
                if(attr=='opacity'){
                    cur=Math.round(parseFloat(getStyle(obj,attr))*100);
                }
                else{
                    cur=parseInt(getStyle(obj,attr));
                }
                if(cur!=json[attr]){
                    isStop=false;
                }

                var speed=(json[attr]-cur)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(attr=='opacity'){
                    obj.style.filter='alpha(opacity:(cur+speed))';
                    opacity=(cur+speed)/100;
                }
                else{
                    obj.style[attr]=cur+speed+'px';
                }
                
                if(isStop){
                    clearInterval(obj.timer);
                    if(fnEnd)fnEnd();
                }
            }
        },30)
    } ;

    function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];
        }
        else{
            return getComputedStyle(obj,false)[name];
        }
    }