JS onmousemove鼠标移动坐标接龙DIV效果实例


Posted in Javascript onDecember 16, 2013

效果:

JS onmousemove鼠标移动坐标接龙DIV效果实例

 

思路:

利用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>
Javascript 相关文章推荐
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
JS如何生成动态列表
Sep 22 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 #Javascript
JSON无限折叠菜单编写实例
Dec 16 #Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 #Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 #Javascript
利用js动态添加删除table行的示例代码
Dec 16 #Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 #Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 #Javascript
You might like
php 常用字符串函数总结
2008/03/15 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
Python函数生成器原理及使用详解
2020/03/12 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
英格兰足协官方商店:England Store
2019/07/12 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
医院搬迁方案
2014/06/14 职场文书
课外科技活动总结
2014/08/27 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
租赁协议书
2015/01/27 职场文书
物业管理交接协议书
2016/03/24 职场文书
Python源码解析之List
2021/05/21 Python
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库