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需刷新才能执行]
【AjaxUI：滑动条】相关文章：
★ 一个Ajax类