Code:
<!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>
<base href="http://www.vicsjavascripts.org/StdImages/" />
<style type="text/css">
/*<![CDATA[*/
.scroller {
position:absolute;left:50px;top:50px;width:500px;height:200px;border:solid red 1px;background-Color:red;
}
.scroller IMG {
float:left;margin-Left:10px;
}
.scrollerV {
position:absolute;left:600px;top:50px;width:220px;height:500px;border:solid red 1px;background-Color:red;text-Align:left;
}
.scrollerV IMG {
float:left;margin-Top:10px;margin-Left:10px;;
}
/*]]>*/
</style>
</head>
<body>
<div id="scroller1" class="scroller" >
<div >
<img src="1.gif" />
<img src="2.gif" />
<img src="3.gif" />
</div>
</div>
<br />
<br />
<div id="scroller2" class="scroller" style="top:350px;" >
Mousemove to control Horizontal Scroller
</div>
<div id="scrollerV" class="scrollerV" >
<div >
<img src="1.gif" />
<img src="2.gif" />
<img src="3.gif" />
<img src="4.gif" />
<img src="5.gif" />
<img src="6.gif" />
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Edge Scroller (01--Febuary-2015)
// By Vic Phillips - http://www.vicsjavascripts.org/
var zxcEdgeScroller={
Init:function(o){
var id=o.ScrollerID,m=o.Mode,max=o.MaxSpeed,min=o.MinSpeed,e=o.Edge,max=o.MaxSpeed,min=o.MinSpeed;
var p=document.getElementById(id),mp=document.getElementById(o.MouseMoveID),s=p?p.getElementsByTagName('DIV')[0]:null;
if (s){
var m=typeof(m)=='string'?m.charAt(0).toUpperCase():'H',m=m=='H'?[0,'left','width','offsetLeft','offsetWidth']:[1,'top','height','offsetTop','offsetHeight'];
var lst=s.lastChild,lst=lst.nodeType==3?lst.previousSibling:lst,c=0,sz,z0=1;
p.style.overflow='hidden';
s.style.position='absolute';
o.xy=c;
s.style[m[1]]=c+'px';
s.style[m[2]]='30000px';
sz=lst[m[3]]+lst[m[4]]
s.style[m[2]]=sz+5+'px';
c=s.cloneNode(true);
c.style.left=s.style.top='0px';
for (;z0<Math.ceil(p[m[4]]/sz)+1;z0++){
c=c.cloneNode(true);
c.style[m[1]]=sz*z0+'px';
s.appendChild(c);
}
o.p=p;
o.mp=mp?mp:p;
o.s=s;
o.sz=sz;
o.m=m;
o.max=typeof(max)=='number'?max:0;
o.min=typeof(max)=='number'?min:0;
o.i=o.min;
o.w=o.Wrap!==false;
o.e=typeof(e)=='number'&&e>0?e:0;
this.addevt(document,'mousemove','move',o);
setInterval(function(){ zxcEdgeScroller.scroll(o); },50);
}
},
move:function(o,p,e){
var m=this.mse(e),p=this.pos(o.mp),xy=m[o.m[0]]-p[o.m[0]],wh=o.mp[o.m[4]],ud=m[0]>p[0]&&m[0]<p[0]+o.mp.offsetWidth&&m[1]>p[1]&&m[1]<p[1]+o.mp.offsetHeight;
o.i=o.min;
if(ud){
o.i=o.max*(xy<o.e?1-xy/o.e:xy>wh-o.e?1-(wh-xy)/o.e:0)*(xy<o.e?-1:1);
o.i!==0?o.min=Math.abs(o.min)*(o.i<0?-1:1):null;
}
},
scroll:function(o,p,e){
o.xy+=o.i;
o.w?(o.i<0&&o.xy<-o.sz)||(o.i>0&&o.xy>0)?o.xy+=o.sz*(o.i>0?-1:1):o.xy:o.xy=Math.min(Math.max(o.xy,o.p[o.m[4]]-o.sz),0);
o.s.style[o.m[1]]=o.xy+'px';
},
mse:function(e){
var ds=!document.body.scrollTop?[document.documentElement.scrollLeft,document.documentElement.scrollTop]:[document.body.scrollLeft,document.body.scrollTop];
return window.event?[e.clientX+ds[0],e.clientY+ds[1]]:[e.pageX,e.pageY];
},
pos:function(o){
var rtn=[0,0];
while(o){
rtn[0]+=o.offsetLeft;
rtn[1]+=o.offsetTop;
o=o.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;
}
}
zxcEdgeScroller.Init({
ScrollerID:'scroller1', // the unique ID name of the scroller parent DIV. (string)
Mode:'Horizontal', //(optional) the scroll mode, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
MaxSpeed:-5, //(optional) the maximum mousemove scroll speed. (number, default = 0)
MinSpeed:2, //(optional) the default scroll speed. (number, default = 0)
Edge:200, //(optional) the distance from the edges to controll scroll speed. (number, default = 0)
Wrap:true, //(optional) true= wrap the scroll, false = no scroll 'wrap'. (boolean, default = true)
MouseMoveID:'scroller2' //(optional) the unique ID name of the element to control scroll speed. (string, default = ScrollerID)
});
zxcEdgeScroller.Init({
ScrollerID:'scrollerV',
Mode:'Vertical',
MaxSpeed:5,
MinSpeed:-1,
Wrap:false,
Edge:200
});
/*]]>*/
</script>
</body>
</html>
New Comer (less than 5 posts)
Help with Image Crawler Script
Posting Permissions
Reply With Quote
Bookmarks