用JTrackBar实现的模拟苹果风格的滚动条_下拉菜单

复制代码 代码如下:function JObj(){} JObj.$c = function(tag){return document.createElement(tag)}; JObj.$ = function(id){return document.getElementById(id)}; JObj.isRate = function(pRateString){ if(!isNaN(pRateString)) return false; if(pRateString.substr(pRateString.length-1,1) != "%") return false; if(isNaN(pRateString.substring(0,pRateString.length - 1))) return false; return true; } function JPos(){} JPos.getAbsPos = function(pTarget){ var x_ = 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_ = 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，你可以自己试着修改一下。 请尊重劳动成果！不得删除原作都信息！后果自负！ ---------------------------------------------------------------------- */ 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 trackBarType; //V & H if((typeof pParent).toUpperCase() == "OBJECT") var body = pParent; else 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 base = 0; var position = 0; //当前位置 var trackFrequence = 10; //点击一次移动多少刻度 var defaultArrowW = defaultArrowH = 15;//Only for IE! this.setRange = function(pMin,pMax){ maxPosition = Math.max(pMin,pMax); minPosition = Math.min(pMin,pMax); maxPosition -= minPosition; base = minPosition; minPosition = 0; } var outlineWidth,trackAreaWidth,preFrequenceWidth; var outlineHeight,trackAreaHeight,preFrequenceHeight; 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(pWH){ oOutline = $c("DIV"); body.appendChild(oOutline); oOutline.className = "JTrackBarStand"; if(trackBarType == "H") oOutline.style.width = pWH + "px"; else if(trackBarType == "V") oOutline.style.height = pWH + "px"; 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": case "UP": self.setPositionBy( -trackFrequence); break; case "RIGHT": case "DOWN": self.setPositionBy(trackFrequence); break; } } var trackarea_click = function(evt){ evt = window.event || evt; var mPos = JPos.getMousePos(evt); var pos_ = JPos.getAbsPos(oTrackArea); if(trackBarType == "H"){ var w_ = parseInt(getRunStyle(oBtnPointer,"width")); self.setPosition(parseInt((mPos.x - pos_.x) / preFrequenceWidth)); }else{ var h_ = parseInt(getRunStyle(oBtnPointer,"height")); self.setPosition(parseInt((mPos.y - pos_.y) / preFrequenceHeight)); } } var createHTrackArea = function(){ var w_ = 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"; } var createVTrackArea = function(){ var h_ = 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"; } var recalcTrackArea = function(){ if(trackBarType == "H"){ var w_ = parseInt(getRunStyle(oArrBtnLeft,"width")); if(isNaN(w_)) w_ = defaultArrowW; trackAreaWidth = outlineWidth - 2 * w_; preFrequenceWidth = trackAreaWidth / maxPosition; oTrackArea.style.width = trackAreaWidth + "px"; }else{ var h_ = parseInt(getRunStyle(oArrBtnUp,"height")); if(isNaN(h_)) h_ = defaultArrowH; trackAreaHeight = outlineHeight - 2 * h_; preFrequenceHeight = trackAreaHeight / maxPosition; oTrackArea.style.height = trackAreaHeight + "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; var mPos = JPos.getMousePos(evt); var pos_ = JPos.getAbsPos(oTrackArea); if(trackBarType == "H") self.setPosition(parseInt((mPos.x - pos_.x) / preFrequenceWidth)); else self.setPosition(parseInt((mPos.y - pos_.y) / preFrequenceHeight)); } var pointer_mouseup = function(){ inDrag = false; } var pointer_mouseout = function(){ //inDrag = false; } var createHPointer = function(){ oBtnPointer = $c("DIV"); oOutline.appendChild(oBtnPointer); oBtnPointer.onmousedown = pointer_mousedown; oBtnPointer.className = "btnPointerH"; oBtnPointer.style.position = "absolute"; var w_ = parseInt(getRunStyle(oBtnPointer,"width")); if(isNaN(w_)) w_ = defaultArrowW; 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;"; } var createVPointer = function(){ oBtnPointer = $c("DIV"); oOutline.appendChild(oBtnPointer); oBtnPointer.onmousedown = pointer_mousedown; oBtnPointer.className = "btnPointerV"; oBtnPointer.style.position = "absolute"; var h_ = parseInt(getRunStyle(oBtnPointer,"height")); if(isNaN(h_)) h_ = defaultArrowH; var pos_ = 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 position = minPosition; var pos_ = JPos.getAbsPos(oTrackArea); if(trackBarType == "H"){ var w_ = parseInt(getRunStyle(oBtnPointer,"width")); if(isNaN(w_)) w_ = defaultArrowW; oBtnPointer.style.left = pos_.x - w_/2 + preFrequenceWidth * position + "px"; }else if(trackBarType == "V"){ var h_ = parseInt(getRunStyle(oBtnPointer,"height")); if(isNaN(h_)) h_ = defaultArrowH; oBtnPointer.style.top = pos_.y - h_/2 + preFrequenceHeight * position + "px"; } doChange(); } var doChange = function(){ self.onChange(position + base); } this.getPosition = function(){ return position; } this.setSkin = function(pSkin){ oOutline.className = pSkin; recalcTrackArea(); self.setPosition(minPosition) } } function JScroll(pWidth,pHeight,pBody){ var self = this; var oOutline = null; var oContentArea = null; var oTrackBarArea = null; this.trackBar = null; var w = JObj.isRate(pWidth) ? pWidth : (!isNaN(pWidth) ? pWidth + "px" : "100%"); var h = JObj.isRate(pHeight) ? pHeight : (!isNaN(pHeight) ? pHeight + "px" : "100%"); var db_ = JObj.$(pBody) || document.body; var createOutline = 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(); } var createTrackBar = 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 = new JTrackBar(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) } }打包文件下载