圆的运动-原生JS详解

来源：互联网发布：海尔电视电视直播软件编辑：程序博客网时间：2024/05/22 11:55

圆的运动
这里写图片描述
接下来做一个简单的布局

<style type="text/css">            .box{                width: 200px;                height: 200px;                border: 1px solid #000;                position: relative;                left: 300px;                top: 100px;                border-radius:50% ;            }            .box span{                width: 30px;                height: 30px;                background: blue;                position: absolute;                left: 50%;                top: 0;                margin-left: -15px;                margin-top: -15px;                border-radius:50% ;            }</style><body>        <div class="box" id="box">            <span id="target">            </span>        </div></body><script>    window.onload=function(){        var oBox=document.getElementByID('box');        var oSpan=document.getElementByID('target');        var r=oBox.offsetWidth/2; //求圆的半径；        var n=0; //将n当做角度，作为运动系数；        var timer=null;        timer=setInterval(function(){            n++;            var oSpan.style.left=r+r*Math.sin(n*Math.PI/180)+'px'; //计算详解见顶部图2            var oSpan.style.top=r-r*Math.cos(n*Math.PI/180)+'px';            if(n==360){                clearInterval(timer);            }        },30)    }</script>

0 0