javascript - How can I make a paragraph bounce around in a div? - Stack Overflow

admin管理员组

文章数量:1331858

This just for fun to see if Javascript can do it.

Imagine I have a paragraph, and surrounding it, is a div or a table cell.

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

Using Javascript, how would I make this object bounce? Not just up and down, but the whole x and y axis movement. It would move diagonally until reaching the edge then e back and bounce realistically within the 'box'.

Is this possible? Again: This is just for fun, I'm not going to put it on a website and reproduce the whole Marquee debacle.

This just for fun to see if Javascript can do it.

Imagine I have a paragraph, and surrounding it, is a div or a table cell.

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

Using Javascript, how would I make this object bounce? Not just up and down, but the whole x and y axis movement. It would move diagonally until reaching the edge then e back and bounce realistically within the 'box'.

Is this possible? Again: This is just for fun, I'm not going to put it on a website and reproduce the whole Marquee debacle.

• javascript
• html

Share Improve this question Follow edited May 27, 2011 at 13:00 Felix Kling 817k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked May 27, 2011 at 12:55 Only Bolivian HereOnly Bolivian Here 36.8k6565 gold badges166166 silver badges257257 bronze badges 5

• plain js or through some useful fw/libs like jQuery/mootools/etc ? – stecb Commented May 27, 2011 at 13:01
• @stecb I guess using a library like jQuery it is not a really big challenge :). – kapa Commented May 27, 2011 at 13:02
• 6 I swear to god if I find out you do this on a website I see I will destroy your puter with thermite :) – josh.trow Commented May 27, 2011 at 13:03
• @bazmegakapa maybe it's not about the 'challenge', but about gettin' things done quickly :D ..that's why I asked him :) – stecb Commented May 27, 2011 at 13:07
• 1 What's wrong with using the good old <blink>? – KooiInc Commented May 27, 2011 at 13:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

Here's something I whipped up - but remember my warning :)

http://jsfiddle/He5aQ/2/

It is possible.

The easiest way is to use jQuery's .animate() method and manipulate the top and left properties.

You can also try with plain Javascript, playing with position: relative or position: absolute, and manipulating top and left with setTimeout calls.

I just gave you an outline because you said it is for fun, so I guess you might want to solve this yourself. It is possible, so go on and have fun :).

本文标签： javascriptHow can I make a paragraph bounce around in a divStack Overflow