PDA

View Full Version : 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/dynamicindex4/bounceimage.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 (http://lloydhassell.com/bouncingimages2/) 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
<!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! :)