运动的小球

<!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>

运动的小球

你可能感兴趣的:(运动)