<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> New Document &L t;/title> <meta name= "generator" content= "EditPlus" > <meta name= "Author" content= "" > <meta NAME= "Key Words "content=" "> <meta name=" Description "content=" "> <meta content-type=" text/html "charset=" gb2312 "/&" Gt <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; Create Mouse Object var cursor=new object (); Set the method of the Mouse 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}; //Create element Object function element (ID) {This.obj=document.getelementbyid (ID); element.prototype={//Get Object Getelement:function () {if (this.obj!=null| | this.obj!=undefined) {return this.obj; else {return "no such Element"; },//Get the ID of the object's parent, and if not, set a 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"; },//Get the page coordinates of the object 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"}; },//Get the object's own dimensions 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"; //Start dragging and set the initial parameter 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,fals e); }//Set drag listener 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" ></div></div> <p> ; sliders, using OO to write this code, class,Like, method, feel good, there is a small bug, when the mouse is released outside the slider, can not stop monitoring the mouse movement, the MouseUp event binding to the document can be resolved, of course, the code to do some corresponding changes. Mozilla is slightly inaccurate under the positioning. can be corrected, but that's it. </p> </BODY> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
