1: Move the layer to get the point of the x-axis y coordinate, so that absolute positioning (note: The vertical pull box affects the x-axis y coordinate values)
Copy Code code as follows:
var x,y,z,down=false,obj
function init () {
Obj=event.srcelement//Event Trigger Object
Obj.setcapture ()//Set mouse capture that belongs to the current object
Z=obj.style.zindex//Gets the z coordinate value of the object
Sets the z-coordinate value of the object to 100 to ensure that the current layer is displayed at the front
obj.style.zindex=100
X=EVENT.OFFSETX//Get the x-coordinate of the mouse pointer position relative to the object that triggered the event
Y=event.offsety//Get the y-coordinate of the mouse pointer position relative to the object that triggered the event
Down=true//Boolean value to determine if the mouse is pressed, true to press, false not pressed
}
function Moveit () {
To determine that the mouse has been pressed and that the onmouseover and onmousedown events occur on the same object
if (down&&event.srcelement==obj) {
With (Obj.style) {
/* Set the X-coordinate of the object to the document's scroll distance in the x-axis direction plus the current mouse pointer equivalent to the X coordinate of the Document object minus the x-coordinate of the pointer position relative to the object that triggered the event when the mouse is pressed.
Posleft=event.x-x;
Posleft=document.body.scrollleft+event.x-x;
/* Set the y-coordinate of the object is the scroll distance of the document in the y-axis direction plus the current mouse pointer corresponds to the y-coordinate value of the Document object minus the y-coordinate of the pointer position relative to the object that triggered the event when the mouse is pressed.
Postop=event.y-y;
Postop=document.body.scrolltop+event.y-y;
window.status= "posleft=" +posleft+ ", postop=" +postop;
window.status=window.status+ "clientx=" +event.clientx+ "clienty=" +event.clienty+ "scrollleft=" + document.body.scrollleft+ "scrolltop=", "+document.body.scrolltop+", event.y= "+event.y+", Event.x "+event.x";
}
}
}
function Stopdrag () {
OnMouseUp Event trigger indicates that the mouse has been released, so set down the value of the down variable to False
Down=false
Obj.style.zindex=z//restore Z coordinate value of object
Obj.releasecapture ()//release mouse capture of current object
Alert ("X:" +obj.style.left+); Y: "+obj.style.top");
}
2: In order for the layer to display the same effect on different resolution browsers, we need to set the layer positioning
The first step: relative positioning of the outermost layer
Copy Code code as follows:
<div id= "T" style= "position:relative;top:0px;left:0px;" > </div>
Step Two: Make a position on the opposite (so that the layer will not deform as the resolution changes)
Copy Code code as follows:
<div id= "T" style= "position:relative;top:0px;left:0px;" >
<div id= "tt" style= "POSITION:ABSOLUTE;TOP:9PX;LEFT:317PX;" >
alt= ""/>
</div>
<div > Ellipsis </div>
<div > Ellipsis </div>
<div > Ellipsis </div>
<div > Ellipsis </div>
<div > Ellipsis </div>
<div > Ellipsis </div>
<div > Ellipsis </div>
<div > Ellipsis </div>
<div > Ellipsis </div>
=================== (Layer Move method call) =============================
Copy Code code as follows:
<div Onmousedown=init () Onmousemove=moveit ()
Onmouseup=stopdrag ()
style= "position:absolute;left:60;top:190;width:5;height:5;z-index:99;; border:1px solid #000000; " >
D
</div>
</div>
