JS onmousemove鼠标移动坐标接龙DIV效果实例
发布时间：2023-08-08 19:59:13
效果：
思路：
利用onmousemove事件，然后获取鼠标的坐标，之后把DIV挨个遍历，最后把鼠标的坐标赋给DIV。
代码：
<head runat="server">
<title></title>
<style type="text/css">
div
{
width: 20px;
height: 20px;
background: #00FFFF;
position: absolute;
}
</style>
<script type="text/javascript">
document.onmousemove = function (ev) {
var div = document.getElementsByTagName('div');
var oEvent = ev || event; //判断兼容性
var pos = GetMouse(oEvent); //确定兼容性后，利用鼠标移动坐标的函数来取得横纵坐标
for (var i = div.length - 1; i > 0; i--) { //遍历DIV，从最后一个开始。
div[i].style.left = div[i - 1].offsetLeft + 'px'; //将前一个的offsetLeft给后一个
div[i].style.top = div[i - 1].offsetTop + 'px'; //将前一个的offsetTop给后一个
}
div[0].style.left = pos.x + 'px'; //将鼠标的横坐标给第一个
div[0].style.top = pos.y + 'px'; //将鼠标的纵坐标给第一个
}
function GetMouse(ev) { //获取鼠标移动的坐标
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop }
}
</script>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
0
投稿猜你喜欢
- 1、删除Oracal在注册表中的主项：regedit.exe->LocalMachine->Software->Oracl
- 做设计类网址导航的初衷是为了资源整合，也是在尝试解决问题。假定访问用户都是行业人士，或者目地性很强的有一定了解的用户，应该如何考虑这个组织系
- 以下代码已经在SQLServer2008上的示例数据库测试通过问题一：如何为数据进行加密与解密，避免使用者窃取机密数据？ 对于一些敏感数据，
- Update Scanner这个Firefox附加软件也是一种很好的选择。Update Scanner可以同时跟踪多个网页，并为不同的网页设
第一步 ： 从清华大学开源软件镜像站下载Anaconda：https://mirrors.tuna.tsinghua.edu.cn/anac- ps：大多与c等编程语言极为相似一、if分支if：给定一个条件，同时为该条件设置多种（一般两种）情况，然后通过条件判断来实现具体的执行段复合
- Array()CInt()CStr() Date() DateAdd() Day() FormatCurrency() FormatDate
- 正如你现在所看到的一样，网页的布局设计变得越来越重要。访问者不愿意再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功接合
- 摘要: Portal是IT领域的新技术，是企业信息化工作的发展方向之一。本文首先介绍了Oracle Portal的定义、特点，接着阐述了po
- 这世上“没有丑女人，只有懒女人”这是女人美丽圣经里的最精彩的一句话了，一个女人只要舍得花时间琢磨怎么保养，怎么打扮，总能够找到方法展现自己美
- 下面十条内容的标题原本是《10 Lessons for Young Designers》，是John C. Jay给年青设计师们的十条经验教
- 关于建立索引的几个准则：1、合理的建立索引能够加速数据读取效率，不合理的建立索引反而会拖慢数据库的响应速度。2、索引越多，更新数据的速度越慢
- 触发器权限和所有权CREATE TRIGGER 权限默认授予定义触发器的表所有者、sysadmin 固定服务器角色成员以及 db_owner
- DIV与TABLE本身并不存在什么优缺点，所谓web标准只是推荐的是正确的使用标签，好比说：DIV用于布局，而TABLE则本来就是转二维数据
- GetRepeatTimes(TheChar,TheString) 得到一个字符串在另一个字符串当中出现几次的函数(新)如：response
- 一、什么是Oracle字符集 Oracle字符集是一个字节数据的解释的符号集合,有大小之分,有相互的包容关系。ORACLE 支持国家语言的体
- 在Perfection kills上看到他去年写的一篇文章，关于HTML优化的，讲的很详细，姑且记录之，尽管里面有些东西并不能在目前的环境里
- js表单验证只能是写限定的东西大收集 代码如下：ENTER键可以让光标移到下一个输入框<input onkeydown=&q
- 这个javascript划词搜索功能，在很多地方我们都会看到，特别是装了浏览器插件的时候，当我们用鼠标选择一段文字的时候，就会出现搜索提示，
- 采集开始第一步是分析要采集的页面。使用浏览器打开要采集的页面（如:http://sports.sina.com.cn/k/2008-09-1
