AjaxUI：滑動條

更新時間：2007年02月13日 00:00:00 作者：

<!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; //創(chuàng)建鼠標(biāo)對象 var Cursor=new Object(); //設(shè)置鼠標(biāo)對象的方法 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}; } //創(chuàng)建元素對象 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";         }     },     //獲得對象的父節(jié)點的id,如果沒有則設(shè)置一個     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";         }     },          //獲得對象的頁面坐標(biāo)     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"; } //開始拖動并設(shè)置初始參數(shù) 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);     } } //設(shè)置拖動監(jiān)聽 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> <div   class="cpabiet"   id="bg"><div   class="7eabxar"   id="drag" style="margin-left:0px;"></div></div> <p>滑動條，采用OO的方式來寫這段代碼,類、對象、方法、感覺很好，有個小bug，當(dāng)鼠標(biāo)在滑塊外邊釋放時，無法停止對鼠標(biāo)移動的監(jiān)聽，將mouseup事件綁定到document即可解決，當(dāng)然代碼要做一些相應(yīng)的修改。mozilla下定位略微不準(zhǔn)?？梢约m正，不過就這樣吧。</p> </BODY> </HTML>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]