JavaScript实现小球沿正弦曲线运动

最新推荐文章于 2022-01-10 16:03:40 发布

置顶 qq_34373065

最新推荐文章于 2022-01-10 16:03:40 发布

阅读量2k

点赞数 1

分类专栏： HTML+JavaScript 文章标签： JavaScript HTML

本文链接：https://blog.csdn.net/qq_34373065/article/details/80601927

版权

HTML+JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如图，小球沿正弦函数曲线从左往右运动，达到曲线右边界（小球运动完一个周期）会回到左边重新开始运动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dot{
            margin-top: 300px;
            position: absolute;
            width: 1px;
            height: 1px;
            background: #000000;
        }
        #ball{
            width: 10px;
            height: 10px;
            background: red;
            border: 1px solid red;
            position: absolute;
            border-radius: 10px;
        }
    </style>
</head>
<body>

<div style="position: relative; width: 600px;
height: 600px;
 border: 1px solid #000000" id="draw_bo" >
</div>
<div id="ball" ></div>
<script type="text/javascript">
    var dom=document.getElementById("draw_bo");
    var ball=document.getElementById("ball");
    var x=0,y=300;
    ball.style.left=x+"px";//小球初始坐标x
    ball.style.top=y+"px";//小球初始坐标y
    for(var angle=0;angle<600;angle+=0.01){//画正弦线
        var childDot=document.createElement('div');
        childDot.className='dot';
        childDot.style.top=300*(Math.sin(angle*Math.PI/300))+"px";
        childDot.style.left=angle+"px";
        dom.appendChild(childDot);
    }
    var time=setInterval(function () {
        x=x+5;//小球运动速度
        y=Math.floor(Math.sin(x/600*2*Math.PI)*300)+300;//小球运动的高度
        if(x>600) x=0;
        ball.style.left=x+"px";
        ball.style.top=y+"px";
    },100);
</script>
</body>
</html>

qq_34373065

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现小球沿正弦曲线运动

如图，小球沿正弦函数曲线从左往右运动，达到曲线右边界（小球运动完一个周期）会回到左边重新开始运动。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt
复制链接

扫一扫