circle.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圆周运动</title>
    <style>
        .circle {
            width: 10px;
            height: 10px;
            background-color: gray;
            position: absolute;
            left: 300px;
            top: 300px;
        }

        .dot {
            border: 1px solid #000;
            position: absolute;
        }

        .wrap {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            border-radius: 50%;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <div class="wrap"></div>
    <div class="circle"></div>

    <script src="./lib/jquery-2.0.3.js"></script>
    <script>
        var r = 100
        var $circle = $('.circle')
        var $wrap = $('.wrap')
        var ang = 0

        function draw() {
            ang++
            var a = Math.cos(ang * (Math.PI / 180)) * r
            var b = Math.sin(ang * (Math.PI / 180)) * r
            var left = $wrap.offset().left
            var top = $wrap.offset().top
            // console.log(left, top, a, b)
            $circle.css({
                left: left + r + a,
                top: top + r - b
            })
            // 使用requestAnimationFrame会更加流畅，相比setInterval
            window.requestAnimationFrame(draw)
        }
        draw()
    </script>
</body>

</html>