圆的运动-原生JS详解

最新推荐文章于 2022-04-14 22:17:01 发布

静宝宝的博客

最新推荐文章于 2022-04-14 22:17:01 发布

阅读量1k

点赞数

分类专栏：原生JS运动系列

本文链接：https://blog.csdn.net/JJ19941003/article/details/54696038

版权

原生JS运动系列专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

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