运动的小球 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</title>
<style>
#div1{ position:relative;width:300px; height:300px; border:1px solid #000; border-radius:50%; margin:50px auto;}
#div1 span{ position:absolute;left:50%;top:0; margin:-15px;width:30px; height:30px; background:red;border-radius:50%;}
</style>
<script>


//角度转弧度
function a2d(a){
    return a*Math.PI/180;    
}

window.onload = function(){
    
    var oDiv = document.getElementById("div1");
    var R = oDiv.offsetWidth/2;
    console.log(R);
    
    var N = 8;
    var aSpan = [];
    for(var i = 0; i < N; i++){
        var oSpan = document.createElement("span");
        
        aSpan.push(oSpan);
        oDiv.appendChild(oSpan);
    }
    
    
    for(var i = 0; i < N; i++){
        
        var a = 360/N*i;
        move(aSpan[i],a);
        
    }
    
    
    function move(obj,iTarget){
        var start = 0;
        var dis = iTarget - start;
        var time = 1000;
        var count = Math.round(time/30);
        var n = 0;
        
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            n++;
            
            var cur = start + dis/count*n;
            
        
            obj.style.left = R + Math.sin(a2d(cur))*R + "px";
            obj.style.top  = R - Math.cos(a2d(cur))*R + "px";
            
            if(n == count){
                clearInterval(obj.timer);
            }    
        },30);
    }
    
    
    
        
};

</script>
</head>

<body>

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

</body>
</html>

posted @ 2015-03-09 17:05  高尔础础  阅读(147)  评论(0)    收藏  举报