在Javascript中以360°角度移动图像

Question

我试图使图像向后移动360°（不旋转），但到目前为止，我只能向特定方向移动，如果我添加左侧＆amp;底部过程，然后图像向左对角线＆amp;底部。以下是属性：

CSS

#circle{
    background:red; 
    border-radius:100px; 
    height:100px; width:100px; 
    position:absolute;
}

JavaSript

(function() {

var speed = 10, 

  moveBox = function(){
  var el = document.getElementById("circle"),
        left = el.offsetLeft,
        moveBy = 3;     

    el.style.left = left + moveBy + "px";

        if(left > 200){
            clearTimeout(timer);
        }
    };

    var timer = setInterval(moveBox, speed);

}());

HTML：

<div id='circle'></div>

JsFiddle Online Demo

问题是循环回红圈，我希望它向左移动＆gt;底部＆gt;对＆gt;向上 以循环的方式。

感谢您的帮助。

Answer 1

使用Math.sin和Math.cos描述圆圈：http://jsfiddle.net/E3peq/7/

(function() {
    var speed = 10, 
        moveX = 0.1,
        moveY = 0.1,
        increment = 0.1,
        amp = 10,
        moveBox = function(){
            var el = document.getElementById("circle"),
                left = el.offsetLeft,
                top = el.offsetTop;

            moveX += increment;
            moveY += increment;

            var moveXBy = Math.cos(moveX) * amp;
            var moveYBy = Math.sin(moveY) * amp;

            el.style.left = (left + moveXBy) + "px";
            el.style.top = (top + moveYBy) + "px";

            if(left > 200){
                clearTimeout(timer);
            }
        };

        var timer = setInterval(moveBox, speed);

}());

编辑：亚伯拉罕在评论中的回答实际上看起来比这更好......