复制代码 代码如下:
functionJObj(){}
JObj.$c=function(tag){returndocument.createElement(tag)};
JObj.$=function(id){returndocument.getElementById(id)};
JObj.isRate=function(pRateString){
if(!isNaN(pRateString))returnfalse;
if(pRateString.substr(pRateString.length-1,1)!="%")
returnfalse;
if(isNaN(pRateString.substring(0,pRateString.length-1)))
returnfalse;
returntrue;
}
functionJPos(){}
JPos.getAbsPos=function(pTarget){
varx_=y_=0;
while(pTarget.offsetParent){
x_+=pTarget.offsetLeft;
y_+=pTarget.offsetTop;
pTarget=pTarget.offsetParent;
}
x_+=pTarget.offsetLeft;
y_+=pTarget.offsetTop;
return{x:x_,y:y_};
}
JPos.getMousePos=function(evt){
varx_=y_=0;
evt=evt||window.event;
if(evt.pageX||evt.pageY){
x_=evt.pageX;
y_=evt.pageY;
}else{
x_=evt.clientX+document.body.scrollLeft-document.body.clientLeft;
y_=evt.clientY+document.body.scrollTop-document.body.clientTop;
}
return{x:x_,y:y_};
}
<--------------------------------------------------------------------
JTrackBar
初始日期：2007/07/11
Author:xlingFairy
Blog:http://xling.blueidea.com
目前只能生水平的，垂直的还没有写。
设计功能：
当改变时，触发事件onChange,并传当前值。
2007/07/12
加入拖动功能。
2007/07/13
加入皮肤功能
2007/08/06
加入垂直的。并修正一个setRange带来的BUG.
未做功能：指定trackFrequence，你可以自己试着修改一下。
请尊重劳动成果！不得删除原作都信息！后果自负！
----------------------------------------------------------------------
*/
functionJPos(){
}
JPos.getAbsPos=function(pTarget){
var_x=0;
var_y=0;
while(pTarget.offsetParent){
_x+=pTarget.offsetLeft;
_y+=pTarget.offsetTop;
pTarget=pTarget.offsetParent;
}
_x+=pTarget.offsetLeft;
_y+=pTarget.offsetTop;
return{x:_x,y:_y};
}
JPos.getMousePos=function(evt){
var_x,_y;
evt=evt||window.event;
if(evt.pageX||evt.pageY){
_x=evt.pageX;
_y=evt.pageY;
}else{
_x=evt.clientX+document.body.scrollLeft-document.body.clientLeft;
_y=evt.clientY+document.body.scrollTop-document.body.clientTop;
}
return{x:_x,y:_y};
}
functionJTrackBar(pParent){
varself=this;
var$=function(pId){
returndocument.getElementById(pId);
}
var$c=function(pTag){
returndocument.createElement(pTag);
}
vartrackBarType;//V&H
if((typeofpParent).toUpperCase()=="OBJECT")
varbody=pParent;
else
varbody=$(pParent)||document.body;
varoOutline=null;
varoTrackArea=null;
varoBtnPointer=null;
varoArrBtnLeft=oArrBtnRight=oArrBtnUp=oArrBtnDown=null;
varinDrag=false;
vardragStartPos=null;
varmaxPosition=100;//最大刻度
varminPosition=0;//最小刻度
varbase=0;
varposition=0;//当前位置
vartrackFrequence=10;//点击一次移动多少刻度
vardefaultArrowW=defaultArrowH=15;//OnlyforIE!
this.setRange=function(pMin,pMax){
maxPosition=Math.max(pMin,pMax);
minPosition=Math.min(pMin,pMax);
maxPosition-=minPosition;
base=minPosition;
minPosition=0;
}
varoutlineWidth,trackAreaWidth,preFrequenceWidth;
varoutlineHeight,trackAreaHeight,preFrequenceHeight;
this.onChange=newFunction();
vargetRunStyle=function(pObj,pProperty){
try{
if(pObj.currentStyle)
returneval("pObj.currentStyle."+pProperty);
else
returndocument.defaultView.getComputedStyle(pObj,"").getPropertyValue(pProperty);
}catch(e){
alert(e);
}
}
/*-----------------------------------------------------*/
varcreateOutline=function(pWH){
oOutline=$c("DIV");
body.appendChild(oOutline);
oOutline.className="JTrackBarStand";
if(trackBarType=="H")
oOutline.style.width=pWH+"px";
elseif(trackBarType=="V")
oOutline.style.height=pWH+"px";
oOutline.style.overflow="hidden";
}
/*-----------------------------------------------------*/
varcreateArrBtn=function(pDirection){
vararrBtn=$c("DIV");
switch(pDirection){
case"LEFT":
arrBtn.className="btnLeft";
arrBtn.style.styleFloat="left";
arrBtn.style.cssFloat="left";
break;
case"RIGHT":
arrBtn.className="btnRight";
arrBtn.style.styleFloat="left";
arrBtn.style.cssFloat="left";
break;
case"UP":
arrBtn.className="btnUp";
break;
case"DOWN":
arrBtn.className="btnDown";
break;
}
arrBtn.direction=pDirection;
arrBtn.onclick=arrBtn_click;
returnarrBtn;
}
vararrBtn_click=function(evt){
evt=window.event||evt;
varo=evt.srcElement||evt.target;
switch(o.direction){
case"LEFT":
case"UP":
self.setPositionBy(-trackFrequence);
break;
case"RIGHT":
case"DOWN":
self.setPositionBy(trackFrequence);
break;
}
}
vartrackarea_click=function(evt){
evt=window.event||evt;
varmPos=JPos.getMousePos(evt);
varpos_=JPos.getAbsPos(oTrackArea);
if(trackBarType=="H"){
varw_=parseInt(getRunStyle(oBtnPointer,"width"));
self.setPosition(parseInt((mPos.x-pos_.x)/preFrequenceWidth));
}else{
varh_=parseInt(getRunStyle(oBtnPointer,"height"));
self.setPosition(parseInt((mPos.y-pos_.y)/preFrequenceHeight));
}
}
varcreateHTrackArea=function(){
varw_=parseInt(getRunStyle(oArrBtnLeft,"width"));
if(isNaN(w_))w_=defaultArrowW;
trackAreaWidth=outlineWidth-2*w_;
preFrequenceWidth=trackAreaWidth/(maxPosition-minPosition);
oTrackArea=$c("DIV");
oOutline.appendChild(oTrackArea);
oTrackArea.onclick=trackarea_click;
oTrackArea.className="trackAreaH";
oTrackArea.style.width=trackAreaWidth+"px";
oTrackArea.style.styleFloat="left";
oTrackArea.style.cssFloat="left";
}
varcreateVTrackArea=function(){
varh_=parseInt(getRunStyle(oArrBtnUp,"height"));
if(isNaN(h_))h_=defaultArrowH;
trackAreaHeight=outlineHeight-2*h_;
preFrequenceHeight=trackAreaHeight/(maxPosition-minPosition);
oTrackArea=$c("DIV");
oOutline.appendChild(oTrackArea);
oTrackArea.onclick=trackarea_click;
oTrackArea.className="trackAreaV";
oTrackArea.style.height=trackAreaHeight+"px";
}
varrecalcTrackArea=function(){
if(trackBarType=="H"){
varw_=parseInt(getRunStyle(oArrBtnLeft,"width"));
if(isNaN(w_))w_=defaultArrowW;
trackAreaWidth=outlineWidth-2*w_;
preFrequenceWidth=trackAreaWidth/maxPosition;
oTrackArea.style.width=trackAreaWidth+"px";
}else{
varh_=parseInt(getRunStyle(oArrBtnUp,"height"));
if(isNaN(h_))h_=defaultArrowH;
trackAreaHeight=outlineHeight-2*h_;
preFrequenceHeight=trackAreaHeight/maxPosition;
oTrackArea.style.height=trackAreaHeight+"px";
}
}
varpointer_mousedown=function(evt){
inDrag=true;
dragStartPos=JPos.getMousePos(evt);
body.onmousemove=pointer_mousemove;
body.onmouseup=pointer_mouseup;
body.onmouseout=pointer_mouseout;
}
varpointer_mousemove=function(evt){
if(!inDrag)return;
varmPos=JPos.getMousePos(evt);
varpos_=JPos.getAbsPos(oTrackArea);
if(trackBarType=="H")
self.setPosition(parseInt((mPos.x-pos_.x)/preFrequenceWidth));
else
self.setPosition(parseInt((mPos.y-pos_.y)/preFrequenceHeight));
}
varpointer_mouseup=function(){
inDrag=false;
}
varpointer_mouseout=function(){
//inDrag=false;
}
varcreateHPointer=function(){
oBtnPointer=$c("DIV");
oOutline.appendChild(oBtnPointer);
oBtnPointer.onmousedown=pointer_mousedown;
oBtnPointer.className="btnPointerH";
oBtnPointer.style.position="absolute";
varw_=parseInt(getRunStyle(oBtnPointer,"width"));
if(isNaN(w_))w_=defaultArrowW;
varpos_=JPos.getAbsPos(oTrackArea);
oBtnPointer.style.left=pos_.x-w_/2+"px";
oBtnPointer.style.top=pos_.y+"px";
oBtnPointer.style.cssText+="left:"+(pos_.x-w_/2)+"px;top:"+pos_.y+"px;";
}
varcreateVPointer=function(){
oBtnPointer=$c("DIV");
oOutline.appendChild(oBtnPointer);
oBtnPointer.onmousedown=pointer_mousedown;
oBtnPointer.className="btnPointerV";
oBtnPointer.style.position="absolute";
varh_=parseInt(getRunStyle(oBtnPointer,"height"));
if(isNaN(h_))h_=defaultArrowH;
varpos_=JPos.getAbsPos(oTrackArea);
oBtnPointer.style.top=pos_.y-h_/2+"px";
oBtnPointer.style.left=pos_.x+"px";
oBtnPointer.style.cssText+="left:"+pos_.x+"px;top:"+(pos_.y-h_/2)+"px";
}
/*-----------------------------------------------------*/
this.createHTrackBar=function(pWidth){
trackBarType="H";
outlineWidth=pWidth;
createOutline(pWidth);
oArrBtnLeft=createArrBtn("LEFT");
oOutline.appendChild(oArrBtnLeft);
createHTrackArea();
oArrBtnRight=createArrBtn("RIGHT");
oOutline.appendChild(oArrBtnRight);
createHPointer();
}
/*-----------------------------------------------------*/
this.createVTrackBar=function(pHeight){
trackBarType="V";
outlineHeight=pHeight;
createOutline(pHeight);
oArrBtnUp=createArrBtn("UP");
oOutline.appendChild(oArrBtnUp);
createVTrackArea();
oArrBtnDown=createArrBtn("DOWN");
oOutline.appendChild(oArrBtnDown);
createVPointer();
}
/*-----------------------------------------------------*/
this.setPositionBy=function(pPosition){
position+=pPosition;
self.setPosition(position);
}
this.setPosition=function(pPosition){
position=pPosition;
if(position>maxPosition)
position=maxPosition;
if(position<minPosition)
position=minPosition;
varpos_=JPos.getAbsPos(oTrackArea);
if(trackBarType=="H"){
varw_=parseInt(getRunStyle(oBtnPointer,"width"));
if(isNaN(w_))w_=defaultArrowW;
oBtnPointer.style.left=pos_.x-w_/2+preFrequenceWidth*position+"px";
}elseif(trackBarType=="V"){
varh_=parseInt(getRunStyle(oBtnPointer,"height"));
if(isNaN(h_))h_=defaultArrowH;
oBtnPointer.style.top=pos_.y-h_/2+preFrequenceHeight*position+"px";
}
doChange();
}
vardoChange=function(){
self.onChange(position+base);
}
this.getPosition=function(){
returnposition;
}
this.setSkin=function(pSkin){
oOutline.className=pSkin;
recalcTrackArea();
self.setPosition(minPosition)
}
}
functionJScroll(pWidth,pHeight,pBody){
varself=this;
varoOutline=null;
varoContentArea=null;
varoTrackBarArea=null;
this.trackBar=null;
varw=JObj.isRate(pWidth)?pWidth:(!isNaN(pWidth)?pWidth+"px":"100%");
varh=JObj.isRate(pHeight)?pHeight:(!isNaN(pHeight)?pHeight+"px":"100%");
vardb_=JObj.$(pBody)||document.body;
varcreateOutline=function(){
oOutline=JObj.$c("DIV");
oOutline.className="oOutline";
db_.appendChild(oOutline);
with(oOutline.style){
width=w;
height=h;
overflow="hidden";
}
oContentArea=JObj.$c("DIV");
oOutline.appendChild(oContentArea);
oContentArea.className="oContentArea";
with(oContentArea.style){
width=oOutline.clientWidth-25+"px";
height=oOutline.clientHeight+"px";
styleFloat="left";
cssFloat="left";
}
}
this.create=function(){
createOutline();
}
varcreateTrackBar=function(){
oTrackBarArea=JObj.$c("DIV");
oOutline.appendChild(oTrackBarArea);
with(oTrackBarArea.style){
width=20+"px";
height=oContentArea.style.height;
stylefloat="left";
cssFloat="left";
overflow="hidden";
}
self.trackBar=newJTrackBar(oTrackBarArea);
self.trackBar.onChange=function(pTrackPosition){
oContentArea.scrollTop=pTrackPosition;
}
self.trackBar.setRange(0,oContentArea.scrollHeight);
self.trackBar.createVTrackBar(oTrackBarArea.clientHeight);
self.trackBar.setSkin("JTrackBarSky");
}
this.addContextArea=function(pId){
oContentArea.appendChild(JObj.$(pId));
oContentArea.style.overflow="hidden";
createTrackBar();
}
this.setSkin=function(pSkin){
self.trackBar.setSkin(pSkin)
}
}
打包文件下载
【用JTrackBar实现的模拟苹果风格的滚动条】相关文章：
★ Javascript中prototype属性实现给内置对象添加新的方法