Obtain the JavaScript script of the current mouse X and Y coordinates of the browser and some important attributes of the document element.

Address: http://www.lvjiyong.com/item/qude-dangqian-shubiao-de-X-Y-zuobiao-37525

To move the mouse over a small chart to display a large image, I used the mouse event to create a layer to display the large image. Of course, we 'd better get the XY coordinates before.

Returns the X and Y coordinates of the current mouse. function SelfXY (){
Var yScrolltop;
Var xScrollleft;
If (self. pageYOffset | self. pageXOffset ){
YScrolltop = self. pageYOffset;
XScrollleft = self. pageXOffset;
} Else if (document.doc umentElement & document.doc umentElement. scrollTop | document.doc umentElement. scrollLeft) {// Explorer 6 Strict
YScrolltop = document.doc umentElement. scrollTop;
XScrollleft = document.doc umentElement. scrollLeft;
} Else if (document. body) {// all other referers
YScrolltop = document. body. scrollTop;
XScrollleft = document. body. scrollLeft;
}
ArrayPageScroll = new Array (xScrollleft + event. clientX, yScrolltop + event. clientY)
Return arrayPageScroll;
}

Appendix: control attributes of mouse and object coordinates
OffsetTop
Obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetParent attribute.

OffsetLeft
Obtains the left-side position of an object relative to the layout or the parent coordinate specified by the offsetParent attribute.

OffsetHeight
Obtains the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.
IE and Opera think offsetHeight = clientHeight + scroll bar + border.
NS and FF hold that offsetHeight is the actual height of the webpage content, which can be smaller than clientHeight.

OffsetWidth
Obtains the width of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.

OffsetParent
Gets the reference of the container Object Defining the offsetTop and offsetLeft attributes.

ClientHeight
Obtains the height of an object, without calculating any margin, border, scroll bar, or padding that may be applied to the object.
Everyone has no objection to clientHeight and thinks it is the height of the visible area of the content, that is, the height of the area where the content can be viewed in the browser of the page, generally, the area below the last toolbar to above the status bar is irrelevant to the page content.

ClientLeft
Obtain the distance between the offsetLeft attribute and the actual left side of the customer region.

ClientTop
Obtain the distance between the offsetTop attribute and the actual top of the customer region.

ClientWidth
Obtains the width of an object. It does not calculate any margin, border, scroll bar, or padding that may be applied to the object.

SCROLL attributes
Scroll
Set or obtain whether to disable scrolling.

ScrollHeight
Obtains the scroll height of an object.

ScrollLeft
Set or obtain the distance between the left-side border of the object and the leftmost side of the currently visible content in the window.

ScrollTop
Sets or obtains the distance between the top of the object and the top of the visible content in the window.

ScrollWidth
Obtains the scroll width of an object.

Event Properties
X
Sets or obtains the x-pixel coordinates of the cursor position relative to the parent document.

ScreenX
Set or obtain the x coordinate of the cursor position relative to the user's screen

OffsetX
Set or obtain the x coordinate of the object with the cursor position relative to the trigger event.

ClientX
Sets or obtains the x coordinate of the mouse pointer position relative to the client area of the window. The client area does not include the control and scroll bar of the window.

Compatibility between IE and FireFox)

1. Window. event
   • IE: window. event object
   • FF: There is no window. event object. You can pass the event object to the function parameters. For example, onmousemove = doMouseMove (event)
2. Current mouse Coordinate
   • IE: event. x and event. y.
   • FF: event. pageX and event. pageY.
   • Generic: both have the event. clientX and event. clientY attributes.
3. The current coordinates of the mouse (plus the scroll bar rolling distance)
   • IE: event. offsetX and event. offsetY.
   • FF: event. layerX and event. layerY.
4. Coordinates of tag x and y: style. posLeft and style. posTop
   • IE: Yes.
   • FF: No.
   • Generic: object. offsetLeft and object. offsetTop.
5. Height and width of the form
   • IE: document. body. offsetWidth and document. body. offsetHeight. Note: The page must have a body tag.
   • FF: always specify innerwidthand always specify innerhegihtto use document.documentelement.clientwidthand document.doc umentElement. clientHeight.
   • Generic: document. body. clientWidth and document. body. clientHeight.
6. Add event
   • IE: element. attachEvent ("onclick", func );.
   • FF: element. addEventListener ("click", func, true ).
   • Usage: element. onclick = func. Although the onclick event can be used, the effect of onclick is different from that of the above two methods. onclick only executes one process, while attachEvent and addEventListener execute one process list, that is, multiple processes. For example, both func1 and func2 are executed in element. attachEvent ("onclick", func1); element. attachEvent ("onclick", func2.
7. Custom Attributes of tags
   • IE: If you define an attribute value for the label div1, you can obtain this value using div1.value and div1 ["value.
   • FF: div1.value and div1 ["value"] cannot be used.
   • General purpose: div1.getAttribute ("value ").
8. Parent node, child node, and delete node
   • IE: parentElement, parement. children, element. romoveNode (true ).
   • FF: parentNode, parentNode. childNodes, node. parentNode. removeChild (node ).
9. Drawing
   • IE: VML.
   • FF: SVG.
10. CSS: transparent
    • IE: filter: progid: DXImageTransform. Microsoft. Alpha (style = 0, opacity = 60 ).
    • FF: opacity: 0.6.
11. CSS: rounded corner
    • IE: rounded corners are not supported.
    • FF:-moz-border-radius: 4px, or-moz-border-radius-topleft: 4px;-moz-border-radius-topright: 4px; -moz-border-radius-bottomleft: 4px;-moz-border-radius-bottomright: 4px ;.
12. CSS: double-line concave-convex border
    • IE: border: 2px outset ;.
    • FF:-moz-border-top-colors: # d4d0c8 white;-moz-border-left-colors: # d4d0c8 white;-moz-border-right-colors: #404040 #808080;-moz-border-bottom-colors: #404040 #808080 ;.