admin管理员组

文章数量:1331668

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.

Share Improve this question edited May 27, 2011 at 13:00 Felix Kling 817k181 gold badges1.1k silver badges1.2k bronze badges asked May 27, 2011 at 12:55 Only Bolivian HereOnly Bolivian Here 36.8k65 gold badges166 silver badges257 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

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