AjaxUI：滑动条

New Document

body{text-align:center;font:12px Arial;}
#bg{width:600px;height:20px;background:#099;margin:auto;padding:3px;text-align:left;}
#drag{width:20px;height:20px;background:#0ff;}
p{width:600px;text-align:left;}

var Parameter;
var first=true;
//创建鼠标对象
var Cursor=new Object();

//设置鼠标对象的方法
Cursor.getCrusorCoordinate=function(event){
var event=event || window.event;
var x=0;
var y=0;
if(event.pageX)
{
x=event.pageX;
y=event.pageY;
}
else
{
x=event.clientX+document.body.scrollLeft-document.body.clientLeft;
y=event.clientY+document.body.scrollTop-document.body.clientTop;
}
return {x:x,y:y};
}

//创建元素对象
function Element(id)
{
this.obj=document.getElementById(id);
}

Element.prototype={

//获得对象
getElement:function()
{
if(this.obj!=null||this.obj!=undefined)
{
return this.obj;
}
else
{
return "no such Element";
}
},

//获得对象的父节点的id,如果没有则设置一个
getElementParent:function()
{
if(this.obj!=null||this.obj!=undefined)
{
var obj=this.obj.parentNode;
if(obj!=null||obj!=undefined)
{
if(obj.id==null||obj.id==undefined)
{
obj.setAttribute("id",this.obj.id+"_parent");
}
return obj.id;
}
else
{
return "no such parentNode";
}
}
else
{
return "no such ParentNode";
}
},

//获得对象的页面坐标
getElementOffset:function()
{
if(this.obj!=null||this.obj!=undefined)
{
var left=0;
var top=0;
var obj=this.obj;
while(obj.offsetParent)
{
left+=obj.offsetLeft;
top+=obj.offsetTop;
obj=obj.offsetParent;
}
return{offsetLeft:left,offsetTop:top};
}
else
{
return{offsetLeft:"no such Element",offsetTop:"no such Element"};
}
},

//获得对象的自身尺寸
getElementSize:function()
{
if(this.obj!=null||this.obj!=undefined)
{
return {width:this.obj.offsetWidth,height:this.obj.offsetHeight}
}
else
{
return{width:"no such Element",height:"no such Element"};
}
}
}

function startMove(event)
{
var event=event || window.event;
var marginLeft=Cursor.getCrusorCoordinate(event).x-Parameter.difX-Parameter.minLeft-Parameter.pL;
if(marginLeft=Parameter.maxLeft)
{
marginLeft=Parameter.maxLeft;
}
Parameter.obj.style.marginLeft=marginLeft+"px";
}

//开始拖动并设置初始参数
function startDrag(event,obj)
{
if(first)
{
var childElement=obj;
var parentElement=new Element(childElement.getElementParent());
var cL=childElement.getElementOffset().offsetLeft;
var pL=parentElement.getElementOffset().offsetLeft;
var minLeft=cL-pL;
var maxLeft=parentElement.getElementSize().width-minLeft-childElement.getElementSize().width;
var difX=Cursor.getCrusorCoordinate(event).x-childElement.getElementOffset().offsetLeft;
Parameter={obj:childElement.getElement(),pL:pL,minLeft:minLeft,maxLeft:maxLeft,difX:difX};
first=false;
}

if(document.attachEvent)
{
document.attachEvent("onmousemove",startMove);
}
else if(document.addEventListener)
{
document.addEventListener("mousemove",startMove,false);
}
}

function stopDrag()
{
if(document.detachEvent)
{
document.detachEvent("onmousemove",startMove);
}
else if(document.removeEventListener)
{
document.removeEventListener("mousemove",startMove,false);
}
}

//设置拖动监听
function dragBind()
{
var element=new Element("drag");
var childElement=element.getElement();
childElement.onmousedown=function(event){startDrag(event,element);};
childElement.onmouseup=function(){stopDrag();};
}

window.onload=dragBind;

滑动条，采用OO的方式来写这段代码,类、对象、方法、感觉很好，有个小bug，当鼠标在滑块外边释放时，无法停止对鼠标移动的监听，将mouseup事件绑定到document即可解决，当然代码要做一些相应的修改。mozilla下定位略微不准。可以纠正，不过就这样吧。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]