用js写一个鼠标坐标实例
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>
效果图
当鼠标移入的时候左上角显示坐标，移出隐藏。
用js写一个鼠标坐标实例的更多相关文章
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 用原生js写一个"多动症"的简历
用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...
- HOOK API （一）——HOOK基础+一个鼠标钩子实例
HOOK API (一)——HOOK基础+一个鼠标钩子实例 0x00 起因 最近在做毕业设计,有一个功能是需要实现对剪切板的监控和进程的防终止保护.原本想从内核层实现,但没有头绪.最后决定从调用层入手 ...
- JS写一个简单日历
JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
- 前端与编译原理——用JS写一个JS解释器
说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...
- 如何使用 js 写一个正常人看不懂的无聊代码
如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...
- 使用JS制作一个鼠标可拖的DIV（二）——限制区域移动
这次是要对上一篇的内容进行扩展. 由于需要对可拖动的 DIV 进行一个区域范围的限制,所以要给于一个容器,让可拖动的 DIV 元素不能逃出该容器的大小范围. 一.思路 1.在外层增加一个 DIV 容器 ...
- 使用JS制作一个鼠标可拖的DIV（四）——缩放
原理与鼠标拖动 DIV 相同. 下面就先实现一个在DIV的右上角显示一个小正方形(类似). 当鼠标按下并拖动时,DIV会以要拖动的元素的左下角的坐标点定位,根据鼠标的拖动,按比例的扩大或缩小. 一.思 ...
- 【Part1】用JS写一个Blog（node + vue + mongoDB）
学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse来 ...
随机推荐
- 【Flask系列】开发一个简单的Flask程序
知识点 初始化:每一个flask程序都必须创建一个程序实例,遵循WSGI(Web Server Gateway interface)协议,把请求->flask Obj; 创建实例: app = ...
- RestSharp Simple REST and HTTP API Client for .NET
var client = new RestClient("http://example.com"); // client.Authenticator = new HttpBasic ...
- 浅析vue混入(mixin)
vue中的混入,可以在一定程度上提高代码的复用性.通俗来说,混入类似于“继承”,当前组件对象继承于组件对象,一般情况下遵循“就近原则”.但是与继承不同的是,继承一般都跟随着属性的重写与合并,混入在不同 ...
- 企业日常巡检shell脚本
Linux内部查看系统信息 $INTERNET192忽略 [root@ mysql-master ~]# ip a|grep eth0|grep inet|cut -d' ' -f6|cut -d'/ ...
- 以面向对象的思维，搭建Android与多ble蓝牙设备并发通讯小框架
Android连接多蓝牙设备.蓝牙与多设备连接.蓝牙ble多设备并发操作.Android连接不了.Android ble开发框架.Android 连接蓝牙总结 前言 小白请绕道百度,本文适合有一定An ...
- Linux下基于Docker部署.Net Core web api项目
Docker的好处我就不说啦,问问度娘就知道了
- iOS开发笔试面试- KVC/KVO简单使用
转自:http://my.oschina.net/caijunrong/blog/510701 一.对于KVC模式(Key Value Coding): 1.其实在实际开发中用得比较多得就是:接收到j ...
- git 使用详解（5）—— get log 查看提交历史
git log 查看 提交历史 在提交了若干更新之后,又或者克隆了某个项目,想回顾下提交历史,可以使用 git log 命令查看. 接下来的例子会用我专门用于演示的 simplegit 项目,运行下面 ...
- solr集群与项目实战
什么是 SolrCloud : SolrCloud(solr 云)是 Solr 提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud.当一个系统的索引数据量少的时 ...
- 2017 ACM/ICPC 沈阳 F题 Heron and his triangle
A triangle is a Heron’s triangle if it satisfies that the side lengths of it are consecutive integer ...