< Return to article
Bounce!
Bounce Effect!
Click me!
<div id="bounce" onclick="boing(this)">Click me!</div>
<script type="text/javascript">
function boing(elm) {
new Effect.Bounce(elm, {height:120});
}
</script>
#bounce {
padding: 5px;
border: 1px solid black;
width: 50px;
height: 50px;
text-align: center;
background-color: #7FFF00;
}
Bouncer!
<ul id="ex">
<li id="a">1</li>
<li id="b">2</li>
<li id="c">3</li>
<li id="d">4</li>
<li id="e">5</li>
<li id="f">6</li>
</ul>
<script type="text/javascript">
new Bouncer('ex');
</script>
ul {
list-style: none;
}
li {
float: left;
padding: 5px;
border: 1px solid black;
width: 50px;
height: 50px;
text-align: center;
}
#a {
background-color: #7FFF00;
}
#b {
background-color: Yellow;
}
#c {
background-color: Orange;
}
#d {
background-color: Red;
}
#e {
background-color: #8A2BE2;
}
#f {
background-color: Blue;
}