Bouncing Image Script

**skittlepunk** · 05-13-2006, 03:33 PM

I am learning HTML and know almost nothing about JAVA, but this script really caught my eye. I wanted to tweak it a little bit, however. The link for the Bouncing Image Script is http://www.dynamicdrive.com/dynamici...ounceimage.htm. I can get 3 of the same image bouncing, but I really wanted to add 3 different images that are bouncing. I am absolutly clueless on how to do that. Does anybody know how i could change the script?
Thanks!
~Skittlepunk

**jscheuer1** · 05-14-2006, 03:14 AM

For that you can use the author's Bouncing Images II script, available from his website. This is similar to the one you are using and different than the Bouncing Images II available from DD (which isn't as cross browser friendly and has a different purpose).

**Nightwing308** · 10-04-2014, 08:42 PM

Hi John,

I realize this thread is ancient, but it's directly related to what I need. The link for the Bouncing Images II script in your post is unfortunately not valid anymore. I found the .js script for this on another site, but no instructions whatsoever to go along with it. I've managed to mutilate...uh, modify, I mean
the .js file to part of what I'm trying to accomplish (make the various different images bounce ONLY up and down), but that's as far as I got.

I need 8 different images (different colored hearts in my demo) to be lined up, evenly spaced across the page, and each heart needs to STAY in its initial position in that line-up when the page is refreshed. Each heart represents a letter that will spell out a name, that's why they have to stay in order and ONLY bounce up and down. But I can't even get them lined up, much less make them stay in any order.
Here is the link to my "demo" page http://www.nightwingsgraphics.com/bounce/bounce1.html

Any help would be greatly appreciated.

Thanks.

**vwphillips** · 10-07-2014, 10:13 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<style type="text/css">
<!--
.wrapper {
  position:relative;left:100px;top:100px;width:650px;border:solid red 1px;text-Align:center;
}

.wrapper IMG {
  position:relative;left:0px;top:0px;width:50px;
}

-->
</style></head>

<body>
<div class="wrapper" >
 <img id="i1" src="http://www.vicsjavascripts.org/StdImages/1.gif">
 <img id="i2" src="http://www.vicsjavascripts.org/StdImages/2.gif">
 <img id="i3" src="http://www.vicsjavascripts.org/StdImages/3.gif">
 <img id="i4" src="http://www.vicsjavascripts.org/StdImages/4.gif">
</div>


<script type="text/javascript">
// Bounce (07-October-2014)
// by Vic Phillips - http://www.vicsjavascripts.org/


var zxcBounce={

 // Script defaults
 Mode:'top',     // the bounce mode 'top' or 'left'       (string)
 Start:0,        // the bounce start and finish position. (number)
 BounceBy:-50,   // the bounce distance +ve or -ve.       (number)
 BounceNu:4,     // the number of bounces.                (number)
 MS:100,         // the bounce duration in milliseconds.  (number)

 Bounce:function(o){
  var i=document.getElementById(o.ID),m=o.Mode,s=o.Start,bn=o.BounceNu,bb=o.BounceBy,ms=o.MS,m=m=='top'||m=='left'?m:this.Mode,b=[],z0=0;
  if (i&&(m=='top'||m=='left')){
   o=this[o.ID+m]?this[o.ID+m]:o;
   o.s=typeof(s)=='number'?s:o.a?o.a[3]:this.Start;
   o.a=o.a?o.a:[i,m];
   o.ms=typeof(ms)=='number'&&ms>0?ms/2:o.ms?o.ms:this.MS/2;
   o.bn=typeof(bn)=='number'&&bn>0?bn:o.bn?o.bn:this.BounceNu;
   o.bb=typeof(bb)=='number'?bb:o.bb?o.bb:this.BounceBy;
   var b=[],z0=0;
   for (;z0<o.bn;z0++){
    b.push(Math.round(o.s+o.bb*(1-Math.sin((z0*90/o.bn)*Math.PI/180))));
    b.push(o.s);
   }
   o.a[0].style[o.a[1]]=o.s+'px';
   this.animate(o,o.a,o.s,b[0],new Date(),o.ms,b);
   b.splice(0,1);
  }
 },

 animate:function(o,a,f,t,srt,mS,b){
  clearTimeout(a[4]);
  var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
  if (isFinite(n)){
   a[3]=n;
   a[0].style[a[1]]=a[3]+'px';
  }
  if (ms<mS){
   a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,b); },10);
  }
  else {
   a[3]=t;
   a[0].style[a[1]]=t+'px';
   if (b&&b.length){
    this.animate(o,o.a,a[3],b[0],new Date(),o.ms,b);
    b.splice(0,1);

   }
  }
 },

 style:function(o,p){
   return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
 }



}

zxcBounce.Bounce({
 ID:'i1',       // the unique ID of the element. (string)
 Mode:'top',
 Start:0,
 BounceBy:-50,
 BounceNu:4,
 MS:400
});

zxcBounce.Bounce({ID:'i2',BounceBy:50})

zxcBounce.Bounce({ID:'i3',BounceNu:16})

zxcBounce.Bounce({ID:'i4',BounceBy:50,MS:200})
zxcBounce.Bounce({ID:'i4',Mode:'left',BounceBy:50,MS:200})
</script>

</body>

</html>

**Nightwing308** · 10-07-2014, 03:37 PM

Awesome, Vic! This will work nicely. Thank you soooooo very much!

Thread: Bouncing Image Script

Thread Tools

Search Thread

Bouncing Image Script

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions