挑战高手，一个圆球，做摆线运动到右边，，，余弦也行，如何写js

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

http://topic.csdn.net/t/20030602/11/1864901.html
这个不就是坐标的问题吗？给你参数形式的：
x=a(t-sint)
y=a(1-cost)
a为圆的半径，t为角度，比如画一拱的话，t从0到2*PI
是这样的吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    #divBall
    {
        position:absolute;
        top:100px;
        left:0px;
    }
    </style>
</head>
<body>
<div id="divBall">●</div>
<script language="javascript" type="text/javascript">
    var ball = document.getElementById("divBall");
    var x = 0;
    var y = 0;
    var angle = 0;
    function Run() {
        if (++x > 800) x = 0;
        if (++angle > 360) {
            angle = 0;
        }
        y = Math.sin(Math.PI / 180 * angle) * 100;
        ball.style.left = x + "px";
        ball.style.top = (100 + y) + "px";

        setTimeout("Run()", 1);
    }
    setTimeout("Run()", 1);
</script>
</body>
</html>
<html>
<head>
<title>aaa</title>
<script type="text/javascript">
window.onload=function(){
var a=60;
var o=[100,300];
var theta=4*Math.PI;
var step=0.1*Math.PI;
var loop=0;setInterval(function(){
if(loop>theta){
loop=0;
}else{
loop+=step;
var ball=document.getElementById('ball');
ball.style.posLeft=o[0]+Math.floor(a*(loop-Math.sin(loop)));
ball.style.posTop=o[1]-Math.floor(a*(1-Math.cos(loop)));
}
},200);
}
</script>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;"
<div id="ball" style="width:20px;height:20px;color:red;">o</div>
</div>
</body>
</html>
再给个吧，这个可以看到运动轨迹
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    #divBall
    {
        position:absolute;
        top:100px;
        left:0px;
    }
    #divX
    {
        position:absolute;
        top:100px;
        background-color:Red;
        height:1px;
        overflow:hidden;
        width:800px;
        left:0px;
    }
    </style>
</head>
<body>
<div id="divLine"></div>
<div id="divBall">●</div>
<div id="divX"></div>
<script language="javascript" type="text/javascript">
    var ball = document.getElementById("divBall");
    var line = document.getElementById("divLine");
    var x = 0;
    var y = 0;
    var angle = 0;
    function Run() {
        x += 2;
        angle += 2;
        if (x > 800) {
            line.innerHTML = "";
            x = 0;
        }
        if (angle > 360) angle = 0;
        y = Math.sin(Math.PI / 180 * angle) * 100;
        ball.style.left = x + "px";
        ball.style.top = (95 + y) + "px";

        //添加运动轨迹
        var p = ball.cloneNode(true);
        line.appendChild(p);

        setTimeout("Run()", 1);
    }
    setTimeout("Run()", 1);
</script>
</body>
</html>
y = Math.sin(Math.PI / 180 * angle) * 100;js 里面就有的正弦余弦函数，嘿嘿下面添加轨迹的学习下。//添加运动轨迹
var p = ball.cloneNode(true);
line.appendChild(p);

挑战高手， 一个圆球，做摆线运动到右边，，，余弦也行，如何写js

解决方案 »

挑战高手，一个圆球，做摆线运动到右边，，，余弦也行，如何写js