Я пытаюсь переместить 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});
});
});
Дополнительная информация:
-I "Произошло одно и то же движение с помощью.animate(), но мне не повезло.
-I 'также попытался получить позицию с.offset(), но не повезло и там.
-I знают, что это можно сделать с HTML5 и элементом canvas, как показано здесь, но я хотел бы придерживаться jQuery и CSS для этого.
-Bonus крутые точки, если кто-нибудь может объяснить, почему, когда я пытаюсь вызвать его рекурсивно, он выдает ошибку (я считаю, что это был максимальный стек, но если кто-то хочет его попробовать, я могу изменить свою скрипту, чтобы воспроизвести там ошибку, чтобы получить точную сообщение об ошибке).
Посмотри на это
$("#box").css({top:yCSS, left:xCSS});
Вы пытаетесь переместить #box :), должен быть #ball http://jsfiddle.net/6J5P7/28/
Изменить #box С#ball
$("#ball").css({top:yCSS, left:xCSS});