DIV弹出层练习(二) ------------------现有一层div想获取鼠标的光标位置并作为这个层的坐标显示出这个层

最新推荐文章于 2024-04-29 09:06:59 发布

UPC_思念

最新推荐文章于 2024-04-29 09:06:59 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： div stylesheet function html c ie

本文链接：https://blog.youkuaiyun.com/zxingchao2009/article/details/5812867

javascript 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的方法，该方法能够捕捉鼠标点击的位置，并将这些坐标实时显示在一个弹出的div层中。通过监听mousedown事件，可以获取到鼠标点击的精确坐标，并据此调整div层的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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></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>  <mce:script type="text/javascript"></mce:script> </head> <body> <div id="show"> <h3> 弹出层问题栏 </h3> <p id="text"> 获取鼠标的光标位置并作为这个层的坐标显示出这个层 </div> </body> </html>

效果: