在Javascript中以360°角度移动图像 [英] Moving an image with 360° angle in Javascript

问题描述

我正在尝试使图像向后移动360°(而不旋转)，但是到目前为止，如果我添加left& ;，则只能向特定方向移动.底部路线，然后图像向左斜向&底部.这里是属性:

I am trying to make an image move 360° (not rotate) back it's course, but so far I was able to move only to a specific direction, if I add left & bottom course, then the image going diagonal to left & bottom. Here are the properties:

#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 在线演示

问题是回圈红色圆圈，我希望它移动到左侧>底部>右侧>向上 以循环的方式.

JsFiddle Online Demo

The problem is looping back the red circle, I want it to move to left > bottom > right > up in a circular manner.

感谢您的帮助.

推荐答案

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

Using Math.sin and Math.cos to describe the circle: 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);

}());

亚伯拉罕在评论中的答案实际上比这要好得多...

Abraham's answer in the comments is actually a lot nicer looking than this...

这篇关于在Javascript中以360°角度移动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！