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; //创建鼠标对象 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需再刷新一下页面才能执行]

AjaxUI：滑动条

AJAX在不同浏览器中XMLHttpRequest对象的生成示例
本文为大家介绍下AJAX在不同浏览器中XMLHttpRequest对象是怎样生成的，以方便我们针对不同浏览器进行测试，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-07-07
[js]一个获取页面ip的正则
[js]一个获取页面ip的正则...
2007-07-07
AJAX聊天室V1.0发布
AJAX聊天室V1.0发布...
2006-09-09
Ajax技术(WEB无刷新提交数据)-
Ajax技术(WEB无刷新提交数据)-...
2006-07-07
[ASP.NET Ajax] ECMAScript基础类以及Asp.net Ajax对类<Object&a
[ASP.NET Ajax] ECMAScript基础类以及Asp.net Ajax对类<Object>的扩展...
2007-01-01
AJAX 图片展示框架56个提升开发效率
随着Lightbox和image Gallery的广泛应用，目前基于异步刷新技术动态展示图片的框架已经是百家争鸣，在这里我收集汇总了56个比较通用的框架，与大家分享！
2009-08-08
Ajax核心XMLHTTP组件资料
javascript下常用的xmlhttp组件和相关技术资料小结，方便了解ajax原理
2008-06-06
Ajax遍历jSon后对每一条数据进行相应的修改和删除(代码分享)
这篇文章主要介绍了Ajax遍历jSon后对每一条数据进行相应的修改和删除的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-11-11
琥珀无限级分类联动菜单AJAX版
琥珀无限级分类联动菜单AJAX版...
2006-11-11
Ajax发送和接收请求
这篇文章主要为大家详细介绍了Ajax发送和接收请求的相关资料，感兴趣的小伙伴们可以参考一下
2016-02-02

AjaxUI：滑动条

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具