AjaxUI：滑动条

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <meta content-type="text/html" charset="gb2312"/> <style type="text/css"> 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;} </style> <script type="text/javascript">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<=0） { marginLeft=0; } else 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; </script> </HEAD> <BODY>滑动条，采用OO的方式来写这段代码,类、对象、方法、感觉很好，有个小bug，当鼠标在滑块外边释放时，无法停止对鼠标移动的监听，将mouseup事件绑定到document即可解决，当然代码要做一些相应的修改。mozilla下定位略微不准。可以纠正，不过就这样吧。<br/> </BODY> </HTML>

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