java实现曲线运动_JavaScript实现小球沿正弦曲线运动

本文实例为大家分享了js实现小球沿正弦曲线运动的具体代码，供大家参考，具体内容如下

效果图：

代码：

Title

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

}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。