移动一个div左，右continously [英] Moving a div left and right continously

问题描述

我一直试图让这个JavaScript动画为小时了工作，我什么也没得到。这个问题是没有得到我的DIV框移动由左到右（或从上到下），那就是我有麻烦了各种情况下的相反。这里是我到目前为止（另外，我已经设置设定为保持包含在视图窗口中心中的感动框，以便如果它击中双方中的任何一个界限，就应该移动到相反方向）。任何帮助是真棒在这一点上。

请注意：下一步是创建盒子回弹效果，但我会担心，一旦我得到简单的动画工作

 的setInterval（函数（）{
    如果（parseInt函数（box.style.left）GT; parseInt函数（viewDim.width  -  57））{        box.style.left  -  = parseInt函数（box.style.left） -  2 +'像素';    如果/ *}其他（parseInt函数（box.style.left）小于0）{        // debug_log（打！）;
        //parseInt(box.style.left）+ = 2 +'像素';    }否则如果（parseInt函数（box.style.top）GT; parseInt函数（viewDim.height-58））{    }否则如果（parseInt函数（box.style.top）小于0）{* /    }其他{        box.style.left = parseInt函数（box.style.left）+ 2 +'像素';
        //box.style.top = parseInt函数（box.style.top）+ 5 +'像素';
    }}，20）;
 

解决方案

code这样总是对我的作品：

  VAR boxWidth = 57，增量= 2;
的setInterval（函数（）{
  VAR左= parseInt函数（box.style.left）;
  如果（左＆GT; = parseInt函数（viewDim.width  -  boxWidth））{
    三角洲= -2;
  }
  如果（左＆下; = 0）{
    增量= 2;
  }
  box.style.left =左+三角+'像素';
}，20）;
 

I've been trying to get this javascript animation to work for hours now, and I got nothing. The problem isn't getting my div box to move from left to right(or from top to bottom), it's the opposite of each case that I have trouble with it. Here's what I have so far(In addition, I have set boundaries set to keep my moving box contained within the view window so if it hits any one of sides, it should move to the opposite direction). Any help is awesome at this point.

Note: the next step is to create a bouncing effect for the box, but i'll worry about that once i get simple animation working.

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

解决方案

Code like this always works for me:

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

这篇关于移动一个div左，右continously的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！