PDA

View Full Version : Vertical conveyor belt slide show?



Jomammy
08-04-2006, 07:11 PM
1) Script Title: Conveyor Belt slideshow script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm

3) Describe problem: Not really a problem per say but I am wanting to alter this script to slide images from top top bottom but the javascript is beyond me. Is there currently one that does this same effect but vertically and not horizontally? if not could someone please instruct me on what to change t this script to create that effect? I would assume that there would not be that much to change, I just do not posses the knowhow in js to do so myself.

jscheuer1
08-05-2006, 07:15 AM
http://home.comcast.net/~jscheuer1/side/marquee_v_slide.htm

Jomammy
08-05-2006, 08:02 AM
Awesome!

Thank you very much for putting in the work to create this.

DazlerD
07-31-2008, 11:46 AM
Thanks jscheuer1

I know this thread is a couple of years old but its the only one i could find with vertical scrolling.

Do you know how I can get the images to scroll downwards?

What I really want is for the images to scroll upwards when the mouse is in the top half, for them to scroll downwards when the mouse is in the bottom half, and to remain still when no focus.

Thanks

jscheuer1
05-21-2014, 03:13 PM
http://home.comcast.net/~jscheuer1/side/files/vertical_slide.htm

Or:

http://home.comcast.net/~jscheuer1/side/demos/crawler/wvertscroll-h.htm

vwphillips
05-21-2014, 05:35 PM
scroll upwards when the mouse is in the top half, for them to scroll downwards when the mouse is in the bottom half, and to remain still when no focus


<!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[*/
.scroller {
position:relative;width:200px;height:400px;border:solid red 1px;
}

.scroller IMG {
float:left;
}

.scrollerH {
position:absolute;left:300px;top:50px;width:400px;height:150px;border:solid red 1px;
}

.scrollerH IMG {
float:left;
}

/*]]>*/
</style></head>

<body>
<div id="scroller1" class="scroller">
<div class="belt">
<img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="image" />
<img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="image" />
<img src="http://www.vicsjavascripts.org/StdImages/Egypt7.jpg" alt="image" />
</div>
</div>
<br />
<div id="scroller2" class="scroller">
<div class="belt">
<img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="image" />
<img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="image" />
<img src="http://www.vicsjavascripts.org/StdImages/Egypt7.jpg" alt="image" />
</div>
</div>

<div id="scroller3" class="scrollerH">
<div class="belt">
<img src="http://www.vicsjavascripts.org/StdImages/Egypt5.jpg" alt="image" />
<img src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" alt="image" />
<img src="http://www.vicsjavascripts.org/StdImages/Egypt7.jpg" alt="image" />
</div>
</div>
<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>

<script type="text/javascript">
/*<![CDATA[*/
// Mouse Scroller. (21-May-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/


var zxcMouseScroller={

init:function(o){
var oop=this,id=o.ParentID,m=o.Mode,e=o.MouseEdge,s=o.Speed,p=document.getElementById(id),b=p?p.getElementsByTagName('DIV')[0]:null,m=typeof(m)=='string'?m.charAt(0).toUpperCase():'V',m=m=='H'?[0,'left','offsetWidth','offsetLeft','width']:[1,'top','offsetHeight','offsetTop','height']
if (b){
p.style.overflow='hidden';
b.style.position='absolute';
m[0]==0?b.style.width='30000px':null;
var clds=b.childNodes,lst=clds[clds.length-1],lst=lst.nodeType==1?lst:lst.previousSibling,sz=lst[m[2]]+lst[m[3]],c,cc,z0=1;
b.style[m[4]]=sz+5+'px';
c=b.cloneNode(true);
c.style.left=c.style.top='0px';
for (;z0<Math.ceil(p.offsetHeight/sz)+1;z0++){
cc=c.cloneNode(true);
cc.style[m[1]]=sz*z0+'px';
b.appendChild(cc);
}
o.m=m;
o.t=0;
o.p=p;
o.b=b;
o.e=typeof(e)=='number'&&e>0&&e<p[m[2]]/2?e:p[m[2]]/2;
o.spd=typeof(s)=='number'&&s!=0?s:2;
o.s=0;
o.sz=sz;
b.style[m[1]]='0px';
this.addevt(document,'mousemove','mse',o,p);
o.to=setInterval(function(){ oop.scroll(o); },50);
}
},

scroll:function(o){
var oop=this;
if (o.s!=0){
o.t+=o.s;
o.t+=o.s<0&&o.t<-o.sz?o.sz:o.t>0?-o.sz:0;
o.b.style[o.m[1]]=o.t+'px';
}
},


mse:function(o,p,e){
var p=this.pos(o.p),ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop],m=window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY],y=m[o.m[0]]-p[o.m[0]];
o.s=o.spd*(m[0]>p[0]&&m[0]<p[0]+o.p.offsetWidth&&m[1]>p[1]&&m[1]<p[1]+o.p.offsetHeight?y<o.e?-1:y>o.p[o.m[2]]-o.e?1:0:0);
},

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


addevt:function(o,t,f,p,p1){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,e);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); }):null;
}




}

zxcMouseScroller.init({
ParentID:'scroller1', // the unique ID name of the parent DIV. (string)
Mode:'Vertical', //(optional) the scroll mode, 'Vertical' or 'Horizontal'. (string, default = 'Vertical')
MouseEdge:100, //(optional) the distance from the edge to activate scroll. (number, default = the parent size/2)
Speed:2 //(optional) the scroll speed. (number, default = 2)
});

zxcMouseScroller.init({
ParentID:'scroller2',
Speed:-2
});

zxcMouseScroller.init({
ParentID:'scroller3',
Mode:'Horizontal',
MouseEdge:50,
Speed:-2
});

/*]]>*/
</script>
</body>

</html>