用js写一个鼠标坐标实例
2024-09-01 21:03:55
HTML代码
写一个div来作为鼠标区域
div中写一个span显示坐标信息
<body>
<div id="">
<span></span>
</div>
</body>
给div和span增加样式并定位
<style type="text/css">
div{
position: relative;/* 定位信息 */
background-color: #398439; /* 背景颜色 */
width: 500px; /* 宽度 */
height: 500px; /* 高度 */
}
span{
position: absolute;/* 绝对定位 */
color: red; /* 文字颜色 */
}
</style>
添加事件
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName("div")[0];//获取当元素节点
var oSpan = oDiv.children[0];
oDiv.onmousemove = function(e){ //鼠标移入事件
var evt = e || event;
var x = evt.offsetX;
var y = evt.offsetY;
oSpan.innerHTML = x + ',' + y + 'px';//显示坐标信息
}
/* 添加一个鼠标移出事件 */
oDiv.onmouseout = function(){
oSpan.innerHTML = ""; //鼠标移除后 坐标信息消失
}
}
</script>
效果图
当鼠标移入的时候左上角显示坐标,移出隐藏。
最新文章
- 尺寸不固定的图片在div中垂直居中并完全显示
- TeamViewer11使用教程
- UDP发送数据测试
- nrf51822-提高nordic ble数据发送速率
- UINavigationBar导航栏相关设置
- 利用Comparator排序
- ASA QOS限速
- 谈谈渲染,玩玩nginx——前后端分离,转发请求到Tomcat的尝试
- HDU2282 Chocolate KM算法
- 用Nodejs+Express搭建web,nodejs路由和Ajax传数据并返回状态,nodejs+mysql通过ajax获取数据并写入数据库
- APK Multi-Tool强大的APK反编译工具终极教程
- JavaScript:我总结的数组API
- [Aaronyang紫色博客] 写给自己的WPF4.5-Blend5公开课系列 3 - 再来一发
- html框内文字垂直居中的方法
- Swift3翻天覆地的改变
- unity 中Canvas MatchHeight
- 了不起的Node.js--之四
- 【转】MySQL count(*)速度慢优化
- python自动化之web抓取
- P3097 [USACO13DEC]最优挤奶Optimal Milking
热门文章
- 【CPLUSOJ】【动态规划】最短回文串
- 基于xtrabackup实现mysql备份还原
- 从面试官甄别项目经验的角度,说说如何在简历中写项目经验(java后端方向)
- Error : Program type already present: android.support.design.widget.CoordinatorLayout$
- 自定制页面跳转时携带原搜索参数的URL
- socket实现ftp上传下载
- 移动端touch滑动事件监听
- 拿 C# 搞函数式编程 - 2
- js学习——1
- 【跟唐老师学习云网络】 - 第7篇 Tcpdump大杀器抓包