多用途运动框架

该运动框架可以用于改变宽度、高度、字体大小、透明度、Left、top等值

 

先上一个获取真正样式的函数

//定义getStyle函数，获取真正样式
function getStyle(obj,attr){
    if(obj.currentStyle){//兼容IE
        return obj.currentStyle[attr];
    }else if(window.getComputedStyle(obj,false)){//兼容FF
        return getComputedStyle(obj,false)[attr]; 
    };
};

 

然后上都是主体部分：

//参数为对象，属性，目标值
function move(obj,json,fnEnd){
    clearInterval(obj.timer);
    
    obj.timer = setInterval(startmove,30);
    
    function startmove(){
        var bBtn = true;  //定义开关，初始值为真，如果全部属性达到目标值，则清除定时器
        
        for(var attr in json){  //循环json，处理没一个JSON属性值
            var iSpeed,iCur=0;
        
            if(attr == "opacity"){
                iCur = Math.round(parseFloat(getStyle(obj,attr)) * 100); // 如果传入的属性是透明度，则转换为百分制
            }else{
                iCur = Math.round(parseFloat(getStyle(obj,attr)));//获取当前属性的真正值
            };
            iSpeed = (json[attr]  - iCur) / 8;
            iSpeed = (iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)); // 当速度大于0是向上取整，小于0向下取整

            if(iCur != json[attr]){
                bBtn = false;
            }
            if(attr == "opacity"){
                obj.style.opacity =  (iCur + iSpeed)/100; 
                obj.style.filter = "alpha(opacity:" + iCur + iSpeed + ")";            
            }else{
                obj.style[attr] = iCur + iSpeed + "px";
            };
        };
        if(bBtn){
            clearInterval(obj.timer);
            if(fnEnd){
                fnEnd.call(obj);
            };                
        };
    };
    
};

 

  

转载于:https://www.cnblogs.com/fyima/p/3722181.html