首页 > 编程语言 > 详细

javascript 完美运动框架

时间:2016-03-09 12:54:45      阅读:194      评论:0      收藏:0      [点我收藏+]

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

function startMove(obj,json,fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var bStop=true; //这一次运动就结束了,所有值都到达了。
        for(var attr in json){

            //1.取当前的值
            var iCur=0;
            if(attr == ‘opacity‘){
                iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
            } else{
                iCur=parseInt(getStyle(obj,attr));
            }

            //2.算速度
            var iSpeed=(json[attr]-iCur)/8;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

            //3.检测停止
            if(iCur!=json[attr]){
                bStop=false;
            }

            if(attr==‘opacity‘){
                obj.style.filter=‘alpha(opacity:‘+(iCur+iSpeed)+‘)‘;
                obj.style.opacity=(iCur+iSpeed)/100;
            } else{
                obj.style[attr]=iCur+iSpeed+‘px‘;
            }
        }

        if(bStop){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },30)
}


/*
调用
window.onload=function(){
    var oDiv=document.getElementByIdx_x(‘div1‘);
    oDiv.onmouseover=function(){
        startMove(oDiv, {width: 102, height: 200, opacity: 100});
    }
    oDiv.onmouseout=function(){
        startMove(oDiv, {width: 100, height: 100, opacity: 30});
    }    
};
 */

javascript 完美运动框架

原文:http://www.cnblogs.com/qibingshen/p/5257506.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!