Home >Web Front-end >JS Tutorial >JavaScript and Div implementation code for layer positioning and movement to obtain coordinates_javascript skills

JavaScript and Div implementation code for layer positioning and movement to obtain coordinates_javascript skills

WBOYOriginal: 2016-05-16 18:20:05955browse

1: Move the layer to obtain the x-axis and y-axis coordinates of the point for absolute positioning (note: the vertical pull-down box will affect the x-axis and y-axis coordinate values)

Copy code The code is as follows:

 
var x,y,z,down=false,obj 
function init(){ 
 obj=event.srcElement //Event trigger object
obj.setCapture() //Set the mouse capture belonging to the current object
z=obj.style.zIndex //Get the z-axis coordinate value of the object
/ /Set the z-axis coordinate value of the object to 100, ensuring that the current layer is displayed at the front 
obj.style.zIndex=100 
x=event.offsetX //Get the X of the mouse pointer position relative to the object that triggered the event Coordinates 
y=event.offsetY //Get the Y coordinate of the mouse pointer position relative to the object that triggered the event 
down=true //Boolean value, determine whether the mouse has been pressed, true means pressed, false means not Press 
} 
function moveit(){ 
//Judge that the mouse has been pressed and the onmouseover and onmousedown events occur on the same object 
if(down&&event.srcElement==obj){ 
with(obj.style){ 
/*Set the X coordinate value of the object to the scroll distance of the document in the X-axis direction plus the current mouse pointer equivalent to the X coordinate value of the document object minus the relative pointer position when the mouse is pressed Based on the X coordinate of the object that triggered the event*/ 
// posLeft=event.x-x; 
posLeft=document.body.scrollLeft event.x-x; 
/*Set the Y coordinate value of the object to the document in Y The scrolling distance in the axis direction plus the current mouse pointer is equivalent 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(){ 
//When the onmouseup event is triggered, it means that the mouse has been released, so set the down variable value to false 
down=false 
obj.style.zIndex= z //Restore the Z-axis coordinate value of the object
obj.releaseCapture() //Release the mouse capture of the current object
//alert("X:" obj.style.left ";Y:" obj.style .top); 
} 

2: In order to make the layer display the same effect on different resolution browsers, we need to set the layer positioning

Step one: Relative positioning of the outermost layer

Copy code The code is as follows:

Step 2: Perform relative positioning (so that the layer will not deform as the resolution changes)

Copy code The code is as follows:

ALT="" />

Omit

Omitted

Omit

//==================== (layer movement method call) = ============================

Copy code The code is as follows:

onmouseup=stopdrag() 
style="position:absolute;left:60 ;top:190;width:5;height:5;z-index:99;;border:1px solid #000000;"> 
D 

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Explanation of the difference between empty() and remove() in jquery_jqueryNext article：Explanation of the difference between empty() and remove() in jquery_jquery

See more

JavaScript and Div implementation code for layer positioning and movement to obtain coordinates_javascript skills

Related articles