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>
<style type="text/css">
/*<![CDATA[*/
.cmotion {
position:relative;left:50px;top:10px;width:600px;height:100px;background-Color:red;border:solid red 1px;margin-Top:50px;
}
.cmotion .belt {
position:absolute;left:0px;top:0px;;
}
.cmotion .belt IMG{
width:100px;height:100px;float:left;
}
.scrollbar {
position:relative;overflow:hidden;left:50px;top:10px;width:600px;height:20px;margin-Top:5px;background-Color:blue;border:solid red 1px;
}
.slide {
position:absolute;left:0px;top:0px;width:50px;height:30px;background-Color:red;
}
.cmotionV {
position:absolute;left:700px;top:10px;width:100px;height:300px;background-Color:red;border:solid red 1px;margin-Top:50px;
}
.cmotionV .belt {
position:absolute;left:0px;top:0px;;
}
.cmotionV .belt IMG{
width:100px;height:100px;
}
.scrollbarV {
position:absolute;overflow:hidden;left:810px;top:55px;width:20px;height:300px;margin-Top:5px;background-Color:blue;border:solid red 1px;
}
.slideV {
position:absolute;left:0px;top:0px;width:30px;height:30px;background-Color:red;
}
/*]]>*/
</style>
</head>
<body>
<div id="tst" class="cmotion" >
<div class="belt" >
<img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/5.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/6.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/7.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/8.gif" />
</div>
</div>
<div id="scrollbar" class="scrollbar" >
<div class="slide" ></div>
</div>
<div id="tst2" class="cmotion" >
<div class="belt" >
<img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/5.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/6.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/7.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/8.gif" />
</div>
</div>
<div id="scrollbar2" class="scrollbar" >
<div class="slide" ></div>
</div>
<div id="tst3" class="cmotionV" >
<div class="belt" >
<img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
</div>
</div>
<div id="scrollbar3" class="scrollbarV" >
<div class="slideV" ></div>
</div>
<div id="tst4" class="cmotionV" style="position:relative;left:100px;top:20px;margin:20" >
<div class="belt" >
<img src="http://www.vicsjavascripts.org/StdImages/0.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/1.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/2.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/3.gif" />
<img src="http://www.vicsjavascripts.org/StdImages/4.gif" />
</div>
</div>
<div id="scrollbar4" class="scrollbar"style="width:200px;top:20px;" >
<div class="slide" ></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Mouse Belt Slider Scroll Bar (25-April-2014)
// by: Vic Phillips - http://www.vicsjavascripts.org/
var zxcMouseBeltSlider={
init:function(o){
var oop=this,id=o.ParentID,e=o.MoveEdge,s=o.MaxSpeed,ms=o.MinSpeed,p=document.getElementById(id),b=p?p.getElementsByTagName('DIV')[0]:null,sb=document.getElementById(o.ScrollBarID),sbs=sb?sb.getElementsByTagName('*')[0]:null;
if (b){
var w=p.offsetWidth,h=p.offsetHeight,m=h>w?[1,'top','height','offsetTop','offsetHeight']:[0,'left','width','offsetLeft','offsetWidth'],c,lst,z0=1;
if (m[0]==0){
b.style.width='30000px';
b.style.textAlign='left';
}
o.p=p;
o.m=m;
o.b=b;
o.w=w;
o.h=h;
o.wr=o.Wrap===true;
lst=b.lastChild,lst=lst.nodeType==1?lst:lst.previousSibling;
o.lst=lst;
o.sz=(o.lst[o.m[3]]+o.lst[o.m[4]])
o.bm=(o.m[0]==0?o.w:o.h)-o.sz;
b.style[m[2]]=o.sz+5+'px';
if (o.wr){
c=b.cloneNode(true);
c.style.left=c.style.top='0px';
for (;z0<Math.ceil(p[m[4]]/o.sz)+1;z0++){
c=c.cloneNode(true);
c.style[m[1]]=o.sz*z0+'px';
b.appendChild(c);
}
}
o.x=-1;
o.s=typeof(s)=='number'?s:5;
o.ms=typeof(ms)=='number'&&Math.abs(ms)<Math.abs(o.s)?ms:0;
o.e=typeof(e)=='number'&&e>0&&e<(m[0]==0?o.w:o.h)/2?e:(m[0]==0?o.w:o.h)/4;
p.style.overflow='hidden';
this.addevt(document,'mousemove','move',o);
o.i=o.ms;
setInterval(function(){ oop.scroll(o); },30);
if (sbs){
w=sb.offsetWidth,h=sb.offsetHeight,m=h>w?[1,'top','height','offsetHeight']:[0,'left','width','offsetWidth'];
o.sm=m;
o.sbs=sbs;
o.sbx=0;
o.sbm=oop.css(sb,m[2])-sbs[m[3]];
sb.style.overflow='hidden';
this.addevt(sbs,'mousedown','down',o);
this.addevt(document,'mouseup','up',o);
}
}
},
move:function(o,e){
var p=this.pos(o.p),xy=this.mse(e),x=xy[0]-p[0],y=xy[1]-p[1],m=o.m[0]==0?x:y,s=o.m[0]==0?o.w:o.h;
o.bm=(o.m[0]==0?o.w:o.h)-(o.lst[o.m[3]]+o.lst[o.m[4]]);
o.i=y>0&&y<o.h&&x>0&&x<o.w?(m<o.e?1-m/o.e:m>s-o.e&&m<s?-(m-s+o.e)/o.e:0)*o.s:o.ms;
o.i!=0?o.ms=Math.abs(o.ms)*(o.i>0?1:-1):null;
o.sbs?this.sbmove(o,e):null;
},
scroll:function(o,e){
var x=o.x+o.i;
o.wr?x=x>0?x-o.sz:x<-o.sz?x+o.sz:x:x=Math.max(Math.min(o.x+o.i,0),o.bm);
if (x!=o.x&&o.i!=0){
o.b.style[o.m[1]]=x+'px';
o.sbs?o.sbs.style[o.sm[1]]=o.sbm*(o.wr?Math.abs(x/o.sz):x/o.bm)+'px':null;
typeof(o.OnScroll)=='function'?o.OnScroll(o,x,o.bm):null;
}
o.x=x;
},
down:function(o,e){
o.xy=this.mse(e)[o.sm[0]];
return this.rtn;
},
sbmove:function(o,e){
if (o.xy){
var xy=this.mse(e)[o.sm[0]],x=Math.min(Math.max(parseInt(this.css(o.sbs,o.sm[1]))+xy-o.xy,0),o.sbm);
o.i=0;
o.sbs.style[o.sm[1]]=x+'px';
x=o.wr?x/o.sbm*-o.sz:o.bm*x/o.sbm;
o.b.style[o.m[1]]=x+'px';
o.xy=xy;
o.ms=Math.abs(o.ms)*(x>o.x>0?1:-1);
o.x=x;
typeof(o.OnScroll)=='function'?o.OnScroll(o,x,o.bm):null;
return this.rtn;
}
},
up:function(o,e){
o.xy=null;
},
rtn:function(e){
if(e.stopPropagation){
e.stopPropagation();
}
if (!window.event){
e.preventDefault();
}
e.cancelBubble=true;
e.cancel=true;
e.returnValue=false;
return false;
},
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 r=[0,0];
while(o){
r[0]+=o.offsetLeft;
r[1]+=o.offsetTop;
o=o.offsetParent;
}
return r;
},
css:function(o,p){
return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
},
addevt:function(o,t,f,p){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,e);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,e); }):null;
}
}
zxcMouseBeltSlider.init({
ParentID:'tst', // the unique ID name of the belt parent DIV. (string)
MoveEdge:100, //(optional) the edge distance to scroll the belt. (number, default = parent size/4)
MaxSpeed:5, //(optional) the maximum scroll speed. (number, default = 5)
MinSpeed:.5, //(optional) the mouseout scroll speed. (number, default = 0)
Wrap:true, //(optional) true = the belt will wrap from first to last. (boolean, default = false = the belt will not wrap)
ScrollBarID:'scrollbar', //(optional) the unique ID name of the scroll bar. (string, default = no scroll bar)
OnScroll:function(o,p,m){ //(optional) a function to call when the belt moves. (function, default = no function call)
// o = the intance object
// p = the belt position
// m = the minimum belt position
}
});
zxcMouseBeltSlider.init({
ParentID:'tst2',
MoveEdge:100,
MaxSpeed:5,
ScrollBarID:'scrollbar2',
OnScroll:function(o,p,m){
}
});
zxcMouseBeltSlider.init({
ParentID:'tst3',
MoveEdge:50,
MaxSpeed:5,
Wrap:true,
ScrollBarID:'scrollbar3',
OnScroll:function(o,p,m){
}
});
zxcMouseBeltSlider.init({
ParentID:'tst4',
MoveEdge:50,
MaxSpeed:5,
ScrollBarID:'scrollbar4',
OnScroll:function(o,p,m){
}
});
/*]]>*/
</script>
</body>
</html>
Bookmarks