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：滑动条

PPJOKE 0.1 (网页嵌入聊天)提供下载
PPJOKE 0.1 (网页嵌入聊天)提供下载...
2006-10-10
ajax实现改变状态和删除无刷新的实例
下面小编就为大家分享一篇ajax实现改变状态和删除无刷新的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12
AjaxUI：鼠标拖拽
AjaxUI：鼠标拖拽...
2007-02-02
利用AJAX开源项目在网页里播放视频实现方法
下载videobox 1.1.zip把它解压到asp.net项目的目录下，并用“Add New Item”新建一个Html文件用以播放视频。
2008-11-11
ajax调用简单实例
这篇文章主要介绍了ajax调用简单实例,结合实例形式分析了基于ajax调用讲URL返回数据填充到指定div的功能,需要的朋友可以参考下
2015-12-12
空格或者空白字符导致$.ajax()报parseerror错误小结
这篇文章主要介绍了空格或者空白字符导致$.ajax()报parseerror错误,需要的朋友可以参考下
2014-04-04
AjaxUI：滑动条
AjaxUI：滑动条...
2007-02-02
ajax用json实现数据传输
本文主要介绍了ajax用json实现数据传输的方法，具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
利用ajax提交form表单到数据库详解(无刷新)
这篇文章主要给大家介绍了关于利用ajax提交form表单到数据库(无刷新)的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2018-02-02
利用ajax+php实现商品价格计算
这篇文章主要为大家详细介绍了利用ajax+php实现商品价格计算，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03

AjaxUI：滑动条

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具