日期:2014-05-17 浏览次数:20879 次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>获取鼠标坐标</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> .tip { width:200px; border:2px solid #ddd; padding:8px; background:#f1f1f1; color:#666; } </style> <script type="text/javascript"> function mousePos(e){ var x,y,z,i; var e = e||window.event; return { x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft, y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop, z:document.documentElement.clientWidth, i:document.documentElement.clientHeight }; }; function test(e){ document.getElementById("mjs").innerHTML = mousePos(e).x+','+mousePos(e).y+','+mousePos(e).z+','+mousePos(e).i; }; function heitest(e){ var mouseX=e.clientX; var mouseY=e.clientY; var bodyX=document.documentElement.clientWidth; var bodyY=document.documentElement.clientHeight/2; var newX=bodyX-780; var newY=mouseY+110; if(mouseY<bodyY){ newY=mouseY+110; }else{ newY=mouseY-80; } if((bodyX-mouseX)>780){ newX=mouseX; }else{ newX=bodyX-780; } window.open('about:blank','newwindow','height=160,width=780,top='+newY+',left='+newX); }; </script> </head> <body onmousemove="test(event)" onclick="heitest(event)"> <div id="mjs" class="tip">111</div> <div id="test" style="width:500px;height:1000px;background:#ccc;" ></div> </body> </html>