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[*/
#tst {
position:relative;left:100px;top:100px;width:600px;height:100px;background-Color:red;border:solid red 1px;
}
#tst .belt {
position:absolute;left:0px;top:0px;width:600px;height:150px;
}
#tst .belt IMG{
width:100px;height:100px;
}
#scrollbar {
position:relative;overflow:hidden;left:100px;top:100px;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;
}
/*]]>*/
</style>
</head>
<body>
<div id="tst" >
<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" >
<div class="slide" ></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Mouse Belt Slider Scroll Bar (o4-Febuary-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,p=document.getElementById(id),b=p?p.getElementsByTagName('DIV')[0]:null,sb=document.getElementById(o.ScrollBarID),sbs=sb?sb.getElementsByTagName('*')[0]:null;
if (b){
b.style.width='30000px';
b.style.textAlign='left';
o.p=p;
o.b=b;
o.w=p.offsetWidth;
o.h=p.offsetHeight;
var lst=b.lastChild,lst=lst.nodeType==1?lst:lst.previousSibling;
o.lst=lst;
o.bm=o.w-(o.lst.offsetLeft+o.lst.offsetWidth);
o.i=0;
o.x=-1;
o.s=typeof(s)=='number'&&s>=1?s:5;
o.e=typeof(e)=='number'&&e>0&&e<o.w/2?e:o.w/4;
p.style.overflow='hidden';
this.addevt(document,'mousemove','move',o);
setInterval(function(){ oop.scroll(o); },30);
if (sbs){
o.sbs=sbs;
o.sbx=0;
o.sbm=oop.css(sb,'width')-sbs.offsetWidth;
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];
o.bm=o.w-(o.lst.offsetLeft+o.lst.offsetWidth);
o.i=(y>0&&y<o.h?x>0&&x<o.e?1-x/o.e:x>o.w-o.e&&x<o.w?-(x-o.w+o.e)/o.e:0:0)*o.s;
o.sbs?this.sbmove(o,e):null;
},
scroll:function(o,e){
var x=Math.max(Math.min(o.x+o.i,0),o.bm);
if (x!=o.x){
this.xy(o,x);
}
o.x=x;
},
xy:function(o,x){
o.b.style.left=x+'px';
o.sbs?o.sbs.style.left=o.sbm*x/o.bm+'px':null;
typeof(o.OnScroll)=='function'?o.OnScroll(o,x,o.bm):null;
},
down:function(o,e){
o.xy=this.mse(e);
return this.ertn;
},
sbmove:function(o,e){
if (o.xy){
var xy=this.mse(e),x=Math.min(Math.max(parseInt(this.css(o.sbs,'left'))+xy[0]-o.xy[0],0),o.sbm),x=o.bm*x/o.sbm;
this.xy(o,x);
o.xy=xy;
o.x=x;
return this.ertn;
}
},
up:function(o,e){
o.xy=null;
},
ertn: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)
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
}
});
/*]]>*/
</script>
</body>
</html>
C Motion slide bar
Reply With Quote
Bookmarks