<!-- /* ---------------------------------------------------------------------- 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(); } }打包文件下载

　　推荐阅读

　　javascript实现动态CSS换肤技术的脚本

<SCRIPT LANGUAGE=javascript> <!-- function SetCookie(name,value){ var argv=SetCookie.arguments; var argc=SetCookie.arguments.length; var expires=(2<argc)?argv[2]:null>>>详细阅读

本文标题：JTrackBar水平拖动效果

地址：http://www.17bianji.com/kaifa2/JS/30289.html

 1/2    1