<!-- /* ---------------------------------------------------------------------- JTrackBar 初始日期：2007/07/11 Author:xlingFairy Blog:http://xling.blueidea.com 目前只能生水平的，垂直的还没有写。 设计功能： 当改变时，触发事件onChange,并传当前值。 2007/07/12 加入拖动功能。 2007/07/13 加入皮肤功能 未做功能：指定trackFrequence，你可以自己试着修改一下。 请尊重劳动成果！不得删除原作都信息！后果自负！ ---------------------------------------------------------------------- */ function JPos(){ } 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}; } function JTrackBar(pParent){     var self = this;     var $ = function(pId){         return document.getElementById(pId);     }     var $c = function(pTag){         return document.createElement(pTag);     }     var body = $(pParent) || document.body;     var oOutline    = null;     var oTrackArea     = null;     var oBtnPointer    = null;     var oArrBtnLeft = oArrBtnRight = oArrBtnUp = oArrBtnDown = null;     var inDrag         = false;     var dragStartPos = null;     var maxPosition     = 100;    //最大刻度     var minPosition        = 0;    //最小刻度     var position        = 0;    //当前位置     var trackFrequence    = 10;    //点击一次移动多少刻度     this.setRange = function(pMin,pMax){         maxPosition = Math.max(pMin,pMax);         minPosition    = Math.min(pMin,pMax);     }         var outlineWidth,trackAreaWidth,preFrequenceWidth;     this.onChange = new Function();     var getRunStyle = function(pObj,pProperty){         try{             if(pObj.currentStyle)             return eval("pObj.currentStyle." + pProperty);         else             return document.defaultView.getComputedStyle(pObj,"").getPropertyValue(pProperty);         }catch(e){             alert(e);         }     }     /*-----------------------------------------------------*/     var createOutline = function(pWidth){         oOutline            = $c("DIV");         body.appendChild(oOutline);         oOutline.className    = "JTrackBarStand";         oOutline.style.width = pWidth + "px";             //oOutline.style.height = "15px";         oOutline.style.overflow = "hidden";     }     /*-----------------------------------------------------*/     var createArrBtn    = function(pDirection){         var arrBtn = $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;         return arrBtn;     }     var arrBtn_click = function(evt){         evt = window.event || evt;         var o = evt.srcElement || evt.target;         switch(o.direction){             case "LEFT":                 if(position <= minPosition)                     return;                 self.setPositionBy( -trackFrequence);                 break;             case "RIGHT":                 if(position >= maxPosition)                     return;                 self.setPositionBy(trackFrequence);                 break;         }     }     var trackarea_click = function(evt){         evt = window.event || evt;         var mPos = JPos.getMousePos(evt);         var pos_ = JPos.getAbsPos(oTrackArea);         var w_ = parseInt(getRunStyle(oBtnPointer,"width"));                 self.setPosition(parseInt((mPos.x - pos_.x) / preFrequenceWidth));     }     var createHTrackArea = function(){         var w_ = parseInt(getRunStyle(oArrBtnLeft,"width"));         trackAreaWidth = outlineWidth - 2 * w_;         preFrequenceWidth = trackAreaWidth / (maxPosition - minPosition);         oTrackArea = $c("DIV");         oOutline.appendChild(oTrackArea);         oTrackArea.onclick = trackarea_click;         oTrackArea.className = "trackArea";         oTrackArea.style.width = trackAreaWidth + "px";         oTrackArea.style.styleFloat = "left";         oTrackArea.style.cssFloat    = "left";     }     var recalcTrackArea = function(){         var w_ = parseInt(getRunStyle(oArrBtnLeft,"width"));         trackAreaWidth = outlineWidth - 2 * w_;                 preFrequenceWidth = trackAreaWidth / (maxPosition - minPosition);         oTrackArea.style.width = trackAreaWidth + "px";     }     var pointer_mousedown = function(evt){         inDrag = true;         dragStartPos = JPos.getMousePos(evt);         body.onmousemove = pointer_mousemove;         body.onmouseup = pointer_mouseup;         body.onmouseout = pointer_mouseout;     }     var pointer_mousemove = function(evt){         if(!inDrag)    return;         //evt = window.event || evt;         //var x_ = evt.clientX;         //window.status = x_ + " " + dragStartPos.x;         //self.setPositionBy(x_ - dragStartPos.x);         //window.status += " " +  evt.clientX;         var mPos = JPos.getMousePos(evt);         var pos_ = JPos.getAbsPos(oTrackArea);         self.setPosition(parseInt((mPos.x - pos_.x) / preFrequenceWidth));             }     var pointer_mouseup = function(){         inDrag = false;     }     var pointer_mouseout = function(){         //inDrag = false;     }     var createHPointer = function(){         oBtnPointer = $c("DIV");         oOutline.appendChild(oBtnPointer);         //oBtnPointer.onclick = trackarea_click;         oBtnPointer.onmousedown = pointer_mousedown;         //oOutline.onmousemove = oBtnPointer.onmousemove = pointer_mousemove;         //oBtnPointer.onmouseup    = pointer_mouseup;         //oBtnPointer.onmouseout = pointer_mouseout;         oBtnPointer.className = "btnPointer";         oBtnPointer.style.position = "absolute";         var w_ = parseInt(getRunStyle(oBtnPointer,"width"));         var pos_ = 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;";     }     /*-----------------------------------------------------*/     this.createHTrackBar = function(pWidth){         outlineWidth = pWidth;         createOutline(pWidth);         oArrBtnLeft = createArrBtn("LEFT");         oOutline.appendChild(oArrBtnLeft);         createHTrackArea();         oArrBtnRight = createArrBtn("RIGHT");         oOutline.appendChild(oArrBtnRight);         createHPointer();     }     /*-----------------------------------------------------*/     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;                 var pos_ = JPos.getAbsPos(oTrackArea);         var w_ = parseInt(getRunStyle(oBtnPointer,"width"));         oBtnPointer.style.left = pos_.x - w_/2 + preFrequenceWidth * position  + "px";          doChange();     }     var doChange = function(){         self.onChange(position);     }     this.getPosition = function(){         return position;     }     this.setSkin = function(pSkin){         oOutline.className = pSkin;         recalcTrackArea();     } } [url=http://files.jb51.net/upload/JTrackBar.rar]打包文件下载[/url]