<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>7777777</title>
<script src= "Http://code.jquery.com/jquery-1.7.2.js" ></script>
<script type= "Text/javascript" >
Method 1
function Mousepos (e) {
var x, y;
var e = e| | window.event;
return {
X:e.clientx+document.body.scrollleft + Document.documentElement.scrollLeft,
Y:e.clienty+document.body.scrolltop + Document.documentElement.scrollTop
};
};
Method 2
Firefox supports the attribute Pagex, and the Pagey attribute, which has already counted the page scrolling,
In Chrome, you can calculate page scrolling displacements by Document.body.scrollleft,document.body.scrolltop,
And under IE can pass Document.documentElement.scrollLeft, Document.documentElement.scrollTop
function Getmousepos (event) {
var e = Event | | window.event;
var scrollx = Document.documentElement.scrollLeft | | Document.body.scrollLeft;
var scrolly = Document.documentElement.scrollTop | | Document.body.scrollTop;
var x = E.pagex | | E.clientx + scrollx;
var y = E.pagey | | E.clienty + scrolly;
Alert (' x: ' + x + ' \ny: ' + y ');
return {' X ': x, ' y ': y};
}
function test (object,zhi,e) {
document.getElementById ("MJs"). InnerHTML = Getmousepos (e). x+ ', ' +getmousepos (e). Y;
$ ("#mydiv1"). CSS ("Top", Getmousepos (e). y+10+ "px"). CSS ("left", Getmousepos (e). x+ "px"). CSS ("Display", "block");
$ ("#mydiv1"). html (zhi);
};
function hides (object) {
document.getElementById ("MJs"). InnerHTML = Getmousepos (e). x+ ', ' +getmousepos (e). Y;
$ ("#mydiv1"). CSS ("display", "none");
$ ("#mydiv1"). HTML ("");
};
</script>
<style type= "Text/css" >
. Tip {
width:200px;
border:2px solid #ddd;
padding:8px;
Background: #f1f1f1;
Color: #666;
}
</style>
<body>
<button> Click Me </button>
<div id= "x" > I'll turn red oh </div>
<div id= "Mydiv1" style= "position:absolute;display:none;border:1px solid silver;background:silver;" >
Tip 1 Effect
</div>
<div id= "Mydiv2" style= "position:absolute;display:none;border:1px solid silver;background:silver;" >
Tip 2 Effect
</div>
<a id= "T1" onmouseover= "test (this, ' finally found ', event)" onmouseout= "hides (this)" > Mouse on the 1</a>
<br><br><br><br><br>
<a id= "T2" onmouseover= "test (this, ' OK ', event)" onmouseout= "hides (this)" > Mouse on 2</a>
</body>
JavaScript gets the coordinates when the mouse moves
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
