0

我正在尝试在屏幕上移动一个 div。我目前正在使用 jQuery 的 .css()，但 div 仍然在同一个位置。最终它将是一个“弹跳球”演示，但此时 div 仅应在单击时移动。

的HTML：

<div id="ball"></div>

CSS：

#ball {
    position:absolute;
    width:10px;
    height:10px;
    border-radius:10px;
    border:1px solid #000;
    background-color:#BADA55;  
}

jQuery：

$(document).ready(function() {
  var xSpeed = 3,
      ySpeed = 2;

  $("#ball").click(function moveIt() {
    var pos = $("#ball").position();
    var maxWidth = $(document).width(),
        maxHeight = $(document).height(),
        x = pos.left,
        y = pos.top;

    x += xSpeed;
    y += ySpeed;

    if(x <= 0 || x+12 >= maxWidth) {
        xSpeed = -xSpeed;   
    }
    if(y <= 0 || y + 12 >= maxHeight) {
        ySpeed = -ySpeed;   
    }

    var yCSS = y + 'px',
        xCSS = x + 'px';

    $("#box").css({top:yCSS, left:xCSS});      
  });
});

小提琴。_

附加信息：

- 我用 .animate() 尝试过同样的动作，但我没有任何运气。

-我也尝试使用 .offset() 获得该职位，但也没有运气。

- 我知道可以使用 HTML5 和 canvas 元素来完成，如此处所示，但我想为此坚持使用 jQuery 和 CSS。

- 如果有人能解释为什么当我尝试递归调用它时会抛出一个错误（我相信它超出了最大堆栈，但如果有人想尝试它，我可以改变我的小提琴以重现那里的错误以获得确切的错误）信息）。

4

2 回答 2

1

看这个

$("#box").css({top:yCSS, left:xCSS});

您正在尝试移动#box :)，应该是#ball http://jsfiddle.net/6J5P7/28/

于 2013-11-09T18:13:06.087 回答
0

用#ball改变#box

$("#ball").css({top:yCSS, left:xCSS});
于 2013-11-09T18:18:18.797 回答