javascript 获取鼠标在盒子中的坐标
2024-10-12 16:30:38
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
.box {
width: 300px;
height: 200px;
padding-top: 100px;
margin: 100px;
font: 18px/1.5 "simsun";
background-color: lemonchiffon;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box"></div> <script src="animate.js" charset="utf-8"></script>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
div.onmousemove = function(event){
event = event || window.event; var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY; var divx = div.offsetLeft;
var divy = div.offsetTop; var targetx = pagex - divx;
var targety = pagey - divy; this.innerHTML = "鼠标在盒子中的X坐标:" + targetx + "px;<br />" + "鼠标在盒子中的Y坐标:" + targety + "px;";
}
</script>
</body>
</html>
最新文章
- (视频) 《快速创建网站》 3.2 WordPress多站点及Azure在线代码编辑器 - 扔掉你的ftp工具吧,修改代码全部云端搞定
- 基于 IdentityServer3 实现 OAuth 2.0 授权服务【客户端模式(Client Credentials Grant)】
- iOS-Debug
- Linux Network IO Model、Socket IO Model - select、poll、epoll
- 【开源java游戏框架libgdx专题】-11-核心库-演员类
- DBParameter比拼接字符串慢的解决办法
- sae storage 使用uploadify插件进行文件批量上传
- c++ string.find()函数的陷阱
- 201521123090 《Java程序设计》 第8周学习总结
- C#版 - PAT乙级(Basic Level)真题 之 1024.科学计数法转化为普通数字 - 题解
- [ SHELL编程 ] 字符串空格和文件空行删除
- 虚拟机设置IP
- loj#2565. 「SDOI2018」旧试题(反演 三元环计数)
- python 实现图的深度优先和广度优先搜索
- Andoid多语言国际化策略
- C++网络爬虫的实现——WinSock编程
- ThinkPHP递归删除栏目
- Delegate(QLabel和QComboBox)
- 单线程的redis为什么达到每秒万级的处理速度?
- redis命令_ZREM
热门文章
- ajax 异步请求
- Building Java Projects with Gradle
- Classification Truth Table
- linux系统centOS7下搭建redis集群中ruby版本过低问题的解决方法
- number (2)编译错 (类的大小写错误) Filewriter cannot be resolved to a type
- Angular 简单的Get
- css CSS常见布局解决方案
- jquery中append、prepend, before和after方法的区别
- poj 3694 Network(割边+lca)
- jsp servlet 的 请求转发和重定向