js运动 多数据运动 含JSON 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px; left: 400px;}
</style>
<script>
window.onload = function() {
    
    var oDiv1 = document.getElementById('div1');
    
    oDiv1.onclick = function() {
        //下面的运动会清除掉上面的定时器
        /*startMove(this, 'width', 200, 10);
        startMove(this, 'height', 200, 10);*/
        
        startMove(this, {
            width : 200,
            height: 200
        }, 10);
    }
    
    function startMove(obj, json, iSpeed) {
        clearInterval(obj.iTimer);
        var iCur = 0;
            
        obj.iTimer = setInterval(function() {
            //定时器每走一下，就要把要运动的属性都推进一次
            
            for ( var attr in json ) {
                
                var iTarget = json[attr];
                
                if (attr == 'opacity') {
                    iCur = Math.round(css( obj, 'opacity' ) * 100);
                } else {
                    iCur = parseInt(css(obj, attr));
                }
                
                if (iCur == iTarget) {
                    clearInterval(obj.iTimer);
                } else {
                    if (attr == 'opacity') {
                        obj.style.opacity = (iCur + iSpeed) / 100;
                        obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
                    } else {
                        obj.style[attr] = iCur + iSpeed + 'px';
                    }
                }
                
            }
            
        }, 30);
    }
    
    function css(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
    
}
</script>
</head>

<body>
    <div id="div1"></div>
</body>
</html>

 

posted @ 2015-03-10 23:17  mayufo  阅读(138)  评论(0)  编辑  收藏  举报