PDA

View Full Version : Spinning fruit machine wheel javascript?



aguafiesta
Nov 25th, 2009, 03:09 PM
Hi - firstly, apologies for the generic nature of this question, I'm sure I will have some more specific questions later into this project!

I'm a complete newbie to javascript and would like to know if it is possible to create a vertical spinning bar like on a fruit machine, that contains a number of images. I would like the bar to have the following behaviour.

1. on the mouse being above the centre point of the bar, the images scroll upwards
2. on the mouse being below the centre point of the bar, the images scroll downwards
3. the further you are from the centre point - the faster the bar scrolls
4. when you hover an image - the bar stops, the image lightens a shade and a link is displayed below the image.

My initial thought is to contain the bar in a div and have javascript actions applied to it depending on the mouse position within the div - the actions will change the positions of the image contained in the div.

Would be great if anyone knew some code that does a similar thing - or could give me some pointers to start me off.

Thanks : )

Philip M
Nov 25th, 2009, 04:51 PM
Sounds more like a Flash application.

vwphillips
Nov 25th, 2009, 05:04 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst {
position:relative;overflow:hidden;width:100px;height:150px;border:solid black 1px;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// by Vic Phillips (20-11-2009)
// http://www.vicsjavascripts.org.uk


// parameter 0 = the mode, H = horizontal, V = vertical. (string)
// parameter 1 = the unique id name of the parent node. (string)
// parameter 2 = the separation between frames. (digits)
// parameter 3 = the distance from the ends to pan. (digits);
// parameter 4 = the maximum speed to pan. (digits);



function zxcPan(mde,id,s,pan,spd){
var obj=document.getElementById(id);
var slide=obj.getElementsByTagName('DIV')[0];
slide.style.position='absolute';
slide.style.top='0px';
this.mde=mde.charAt(0).toUpperCase()=='V'?['top','left','height','offsetHeight',1]:['left','top','width','offsetWidth',0];
var clds=slide.childNodes;
s=s||0;
for (var lft=0,z0=0;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
clds[z0].style.position='absolute';
clds[z0].style[this.mde[0]]=lft+'px';
clds[z0].style[this.mde[1]]='0px';
lft+=clds[z0][this.mde[3]]+s;
}
}
slide.style[this.mde[2]]=lft+'px';
this.slide=[[slide,-lft]];
var nu=Math.max(Math.ceil(obj[this.mde[3]]/lft)+1,3);
for (var z1=0;z1<nu;z1++){
this.slide[z1+1]=[slide.cloneNode(true),lft*z1];
obj.appendChild(this.slide[z1+1][0]);
}
this.lft=lft;
this.ud=1;
this.Pan(1);
this.spd=spd||5;
pan=pan||obj[this.mde[3]]/4;
this.pan=[pan,obj[this.mde[3]]-pan];
this.addevt(obj,'mousemove','Move');
this.addevt(obj,'mouseout','MseOut');
this.obj=obj;
}

zxcPan.prototype.Pan=function(ud){
clearTimeout(this.to);
for (var oop=this,lgth=this.slide.length,z0=0;z0<lgth;z0++){
this.slide[z0][1]+=ud*this.ud;
this.slide[z0][0].style[this.mde[0]]=this.slide[z0][1]+'px';
if ((this.ud<0&&this.slide[z0][1]<-this.lft)||(this.ud>0&&this.slide[z0][1]>this.lft*(lgth-2))){
this.slide[z0][1]+=this.lft*lgth*(this.ud<0?1:-1);
}
}
this.to=setTimeout(function(){ oop.Pan(ud); },20);
}

zxcPan.prototype.MseOut=function(e){
var obj=e.relatedTarget||e.toElement;
while (obj.parentNode){
if (obj==this.obj){
return;
}
obj=obj.parentNode;
}
this.Pan(1);
}

zxcPan.prototype.Move=function(e){
var x=zxcMse(e)[this.mde[4]]-zxcPos(this.obj)[this.mde[4]];
var ud=0;
if (x<this.pan[0]){
this.ud=-1;
ud=this.spd*(1-x/this.pan[0]);
}
if (x>this.pan[1]){
this.ud=1;
ud=this.spd*((x-this.pan[1])/this.pan[0]);
}
this.Pan(ud);
}

zxcPan.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}

function zxcMse(ev){
if(!ev) var ev=window.event;
if (document.all) return [ev.clientX+zxcDocS()[0],ev.clientY+zxcDocS()[1]];
return [ev.pageX,ev.pageY];
}

function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}

function zxcPos(obj){
var rtn=[obj.offsetLeft,obj.offsetTop];
while(obj.offsetParent!=null){
var objp=obj.offsetParent;
rtn[0]+=objp.offsetLeft;
rtn[1]+=objp.offsetTop;
obj=objp;
}
return rtn;
}

function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}


/*]]>*/
</script>

</head>

<body>
<div id="tst" >
<div >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="100" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="100" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width="100" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" width="100" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Seven.gif" width="100" height="50" />
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
var S=new zxcPan('v','tst',5,50,15);
/*]]>*/
</script>
</body>

</html>

aguafiesta
Nov 25th, 2009, 05:12 PM
Thanks vwphillips that's great.

It will be a brilliant starting point for me!