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 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
Aug 12 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
在vue中使用image-webpack-loader实例
Nov 12 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
vue-cli单页应用改成多页应用配置详解
2017/07/14 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
2017/12/14 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
jQuery实现动态向上滚动
2020/12/21 jQuery
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2016/09/18 Python
python字符串,数值计算
2016/10/05 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python中字典和集合学习小结
2017/07/07 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
python 定时修改数据库的示例代码
2018/04/08 Python
python爬虫实例详解
2018/06/19 Python
python__new__内置静态方法使用解析
2020/01/07 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
python新式类和经典类的区别实例分析
2020/03/23 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
主题婚礼策划方案
2014/02/10 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
竞选班委演讲稿
2014/04/28 职场文书
现货白银电话营销话术
2015/05/29 职场文书
在校学生证明格式
2015/06/24 职场文书
高中同学会致辞
2015/08/01 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
详解nodejs内置模块
2021/05/06 NodeJs