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 相关文章推荐
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
tsconfig.json配置详解
May 17 Javascript
antd form表单数据回显操作
Nov 02 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
url decode problem 解决方法
2011/12/26 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
PHP对象Object的概念 介绍
2012/06/14 PHP
PHP的PSR规范中文版
2013/09/28 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
PHP实现字符串大小写转函数的功能实例
2019/02/06 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
python读写ini配置文件方法实例分析
2015/06/30 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
python区块及区块链的开发详解
2019/07/03 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
机械工程师的岗位职责
2013/11/17 职场文书
三好学生自我鉴定
2013/12/17 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
员工加薪申请报告
2015/05/15 职场文书
校园安全学习心得体会
2016/01/18 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python