Блог

Главная - Вопросы по программированию - Как я могу заставить абзац перемещаться в div?

Как я могу заставить абзац перемещаться в div?

#javascript #html

#javascript #HTML

Вопрос:

Это просто для развлечения, чтобы посмотреть, может ли Javascript это сделать.

Представьте, что у меня есть абзац, а вокруг него находится div или ячейка таблицы.

 <table>
    <tr>
        <td>Foo</td>
        <td><p class="bouncer">This is the bouncing paragraph.</p></td>
    </tr>
</table>

Используя Javascript, как бы я заставил этот объект перемещаться? Не только вверх и вниз, но и по всему движению по осям x и y. Он будет перемещаться по диагонали, пока не достигнет края, затем вернется и реалистично подпрыгнет внутри «коробки».

Возможно ли это? Еще раз: это просто для развлечения, я не собираюсь размещать это на веб-сайте и воспроизводить весь провал Marquee.

Комментарии:

1. обычный js или с помощью некоторых полезных fw / библиотек, таких как jQuery / mootools / etc?

2. @stecb Я предполагаю, что использование библиотеки, подобной jQuery, не является действительно большой проблемой :).

3. Клянусь богом, если я узнаю, что вы делаете это на веб-сайте, который я вижу, я уничтожу ваш компьютер термитом 🙂

4. @bazmegakapa может быть, дело не в «задаче», а в том, чтобы быстро все сделать : D .. вот почему я спросил его 🙂

5. Что плохого в использовании старого доброго <blink> ?

Ответ №1:

Вот кое-что, что я придумал, но помните мое предупреждение 🙂

http://jsfiddle.net/He5aQ/2/

Ответ №2:

Это возможно.

Самый простой способ — использовать .animate() метод jQuery и манипулировать свойствами top и left .

Вы также можете попробовать использовать обычный Javascript, играя с position: relative or position: absolute и манипулируя вызовами top and left с setTimeout помощью.

Я просто дал вам набросок, потому что вы сказали, что это для развлечения, так что, я думаю, вы, возможно, захотите решить это самостоятельно. Это возможно, так что продолжайте и получайте удовольствие :).