javascript - 连续左右移动一个div

Question

我已经尝试让这个 javascript 动画运行几个小时了，但一无所获。问题不是让我的 div 框从左到右(或从上到下)移动，而是与我遇到麻烦的每种情况相反。这是我到目前为止所拥有的(此外，我已经设置了边界以将我的移动框保持在 View 窗口内，因此如果它碰到任何一侧，它应该向相反的方向移动)。在这一点上，任何帮助都很棒。

注意:下一步是为盒子创建一个弹跳效果，但一旦我开始使用简单的动画，我就会担心这个。

      setInterval(function(){


    if(parseInt(box.style.left) > parseInt(viewDim.width - 57)){

        box.style.left -= parseInt(box.style.left) - 2 + 'px';



    /* } else if(parseInt(box.style.left) < 0){

        //debug_log("HIT!!");
        //parseInt(box.style.left) += 2 + 'px';

    } else if(parseInt(box.style.top) > parseInt(viewDim.height-58)){



    } else if(parseInt(box.style.top) < 0){*/



    } else {

        box.style.left = parseInt(box.style.left) + 2 + 'px';
        //box.style.top = parseInt(box.style.top) + 5 + 'px';
    } 

}, 20);

Answer 1

这样的代码总是适合我:

var boxWidth = 57, delta = 2;
setInterval(function(){
  var left = parseInt(box.style.left);
  if(left >= parseInt(viewDim.width - boxWidth)){
    delta = -2;
  }
  if (left <= 0) {
    delta = 2;
  }
  box.style.left = left + delta + 'px';
}, 20);