javascript - 让 div 在屏幕上移动

Question

我需要让一个彩色 div 水平向右移动，当它到达边缘时，它的大小应该加倍，围绕中心旋转的速度应该是两倍。

var topPosition = 50;
var leftPosition = 250;
var rightPosition = 800;
  function move(){
  var go = document.getElementById("box");
  go.style.left = leftPosition + "px";  
  go.style.right = rightPosition + "px";
  go.style.visibility = "visible";
  ++leftPosition;

  if (leftPosition == 800){
--leftPosition;

就像我告诉的那样，它停在 800 px，但不会返回

Answer 1

让我们稍微清理一下代码并实现您想要的内容。按顺序:

1. 移至 800 像素
2. 完成 1 后，返回，速度加倍，大小加倍。

我们将使用一个作用域变量来完成此操作:speed。 speed 将是默认的速度和方向。

我还在 setInterval 中分隔了您的代码，以免阻止页面的执行。

function move() {
    var elem = document.getElementById("box"),
        speed = 1,
        currentPos = 0;
    // Reset the element
    elem.style.left = 0+"px";
    elem.style.right = "auto";
    var motionInterval = setInterval(function() {
        currentPos += speed;
        if (currentPos >= 800 && speed > 0) {
           currentPos = 800;
           speed = -2 * speed;
           elem.style.width = parseInt(elem.style.width)*2+"px";
           elem.style.height = parseInt(elem.style.height)*2+"px";
        }
        if (currentPos <= 0 && speed < 0) {
           clearInterval(motionInterval);
        }
        elem.style.left = currentPos+"px";
    },20);
}

fiddle :http://tinker.io/7d393 。你会发现，它确实有效。