圆的运动-原生JS详解

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

<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值