OStack程序员社区-中国程序员成长平台 › 门户 ›编程› AJAX› AJAX编程经验 › 查看内容

AjaxUI：滑动条

2022-2-5 17:02| 发布者: 菜鸟教程小白| 查看: 346| 评论: 0|原作者: [db:作者]|来自: [db:来源]

摘要: 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{widt ...

<!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> <div id="bg"><div id="drag" style="margin-left:0px;"></div></div> <p>滑动条，采用OO的方式来写这段代码,类、对象、方法、感觉很好，有个小bug，当鼠标在滑块外边释放时，无法停止对鼠标移动的监听，将mouseup事件绑定到document即可解决，当然代码要做一些相应的修改。mozilla下定位略微不准。可以纠正，不过就这样吧。</p> </BODY> </HTML>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]