欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JTrackBar水平拖动效果_javascript技巧

程序员文章站 2024-01-10 17:15:22
...
/*
----------------------------------------------------------------------
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 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 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();
}
}
打包文件下载