免费看操片,2020最新亚洲中文字幕在线青色

主頁(yè) > 知識(shí)庫(kù) > AjaxUI：滑動(dòng)條

AjaxUI：滑動(dòng)條

<!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)對(duì)象 var Cursor=new Object(); //設(shè)置鼠標(biāo)對(duì)象的方法 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)建元素對(duì)象 function Element(id) {     this.obj=document.getElementById(id); } Element.prototype={     //獲得對(duì)象     getElement:function()     {         if(this.obj!=null||this.obj!=undefined)         {             return this.obj;         }         else         {             return "no such Element";         }     },     //獲得對(duì)象的父節(jié)點(diǎn)的id,如果沒(méi)有則設(shè)置一個(gè)     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";         }     },          //獲得對(duì)象的頁(yè)面坐標(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"};         }     },     //獲得對(duì)象的自身尺寸     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"; } //開(kāi)始拖動(dòng)并設(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è)置拖動(dòng)監(jiān)聽(tīng) 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="jhfukjr"   id="bg"><div   class="imzsmab"   id="drag" style="margin-left:0px;"></div></div> <p>滑動(dòng)條，采用OO的方式來(lái)寫(xiě)這段代碼,類(lèi)、對(duì)象、方法、感覺(jué)很好，有個(gè)小bug，當(dāng)鼠標(biāo)在滑塊外邊釋放時(shí)，無(wú)法停止對(duì)鼠標(biāo)移動(dòng)的監(jiān)聽(tīng)，將mouseup事件綁定到document即可解決，當(dāng)然代碼要做一些相應(yīng)的修改。mozilla下定位略微不準(zhǔn)。可以糾正，不過(guò)就這樣吧。</p> </BODY> </HTML>

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

標(biāo)簽：深圳伊春銅川晉城西藏威海撫州崇左

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《AjaxUI：滑動(dòng)條》，本文關(guān)鍵詞 AjaxUI,滑動(dòng),條,AjaxUI,滑動(dòng),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。