Question

我一直试图让这个javascript动画现在工作几个小时，我什么也没得到。问题是没有让我的div框从左到右（或从上到下）移动，这与我遇到麻烦的情况相反。这是我到目前为止所做的（另外，我设置了边界设置以保持我的移动框包含在视图窗口内，因此如果它碰到任何一个边，它应该移动到相反的方向）。此时任何帮助都很棒。

注意：下一步是为盒子创建一个弹跳效果，但是一旦我让简单的动画工作，我就会担心。

      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);

Answer 2

虽然您现在有了解决方案，但我无法帮助自己制作完整的代码 here 。

弹跳框在父元素内部反弹。在IE8，FF3和Opera11中测试过。

Answer 3

这可以给出一个想法，如何使用jQuery

http://jsfiddle.net/rFkpy/

$('#myDiv').click(function() {
  $(this).animate({
    left: '+=250'
  }, 1500, "easeOutBounce", function() {
    // callBack
  });
});

连续左右移动div

3 个答案: