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 相关文章推荐
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
JS求Number类型数组中最大元素方法
Apr 08 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
使用Vue实现一个树组件的示例
Nov 06 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 闭包特性在实际应用中的问题
2009/10/30 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python引用DLL文件的方法
2015/05/11 Python
利用Python实现图书超期提醒
2016/08/02 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
python实现手机销售管理系统
2019/03/19 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
Hibernate持久层技术
2013/12/16 面试题
中级会计大学生职业生涯规划书
2014/09/16 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2014年个人委托书范本
2014/10/13 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书