DIV弹出层练习(二) ------------------现有一层div想获取鼠标的光标位置并作为这个层的坐标显示出这个层...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>现有一层div想获取鼠标的光标位置并作为这个层的坐标显示出这个层</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <mce:style><!-- * { margin: 0; padding: 0px; } body { padding: 30px; } #show { width: 300px; height: 200px; position: absolute; border: 1px solid #4c77aa; background: #f2f7fd; display:none; z-index:9999; zoom: 1; } #show h3 { background: #4c77aa; color: #fff; font-size: 14px; padding: 5px; } #show span { position: absolute; right: 3px; top: 3px; display: b lock; cursor: pointer; color: #fff; font-weight: bold; } #show p { padding: 5px; } #text { font-size: 12px; text-indent: 2em; line-height: 2 0px; } --></mce:style><style mce_bogus="1">* { margin: 0; padding: 0px; } body { padding: 30px; } #show { width: 300px; height: 200px; position: absolute; border: 1px solid #4c77aa; background: #f2f7fd; display:none; z-index:9999; zoom: 1; } #show h3 { background: #4c77aa; color: #fff; font-size: 14px; padding: 5px; } #show span { position: absolute; right: 3px; top: 3px; display: b lock; cursor: pointer; color: #fff; font-weight: bold; } #show p { padding: 5px; } #text { font-size: 12px; text-indent: 2em; line-height: 2 0px; }</style> <!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">--> <mce:script type="text/javascript"><!-- function $(id){ return document.getElementById(id); } // 获得事件Event对象，用于兼容IE和FireFox function getEvent() { return window.event || arguments.callee.caller.arguments[0]; } function showDiv(){ var event=getEvent(); $("show").style.display="block"; $("show").style.left=document.body.scrollLeft+event.clientX+"px"; $("show").style.top=document.body.scrollTop+event.clientY+"px"; } document.onmousedown=showDiv; // --></mce:script> </head> <body> <div id="show"> <h3> 弹出层问题栏 </h3> <p id="text"> 获取鼠标的光标位置并作为这个层的坐标显示出这个层 </div> </body> </html>
效果: