弧形运动

最新推荐文章于 2025-04-11 11:54:03 发布

HAI6545

最新推荐文章于 2025-04-11 11:54:03 发布

阅读量241

点赞数 1

分类专栏： JavaScript案例文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/HAI6545/article/details/122439905

版权

JavaScript案例专栏收录该内容

105 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
.box{
    width: 30px;
    height: 30px;
    background-color: #f00;
    position:absolute;
    left: 300px;
    top: 300px;
    border-radius: 50%;
}
.radius{
    width: 200px;
    height: 200px;
    border:1px solid #000;
    border-radius: 50%;
    position:absolute;
    left:115px;
    top:215px;
}
</style>
<body>
<div class="box"></div>
<div class="radius"></div>
</body>
<script>
var r = 100
var x = 200
var y = 300
var deg = 0
var box = document.querySelector('.box');
setInterval(function(){
    deg++
    var l = Math.cos(deg * Math.PI / 180) * r + x
    var t = Math.sin(deg * Math.PI / 180) * r + y
    box.style.left = l + 'px'
    box.style.top = t + 'px'
}, 20)
</script>
</html>