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 相关文章推荐
jquery tools系列 expose 学习
Sep 06 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
深入理解ES6的迭代器与生成器
Aug 19 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
js利用iframe实现选项卡效果
Aug 09 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数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
2017/04/19 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
jQuery中复合属性选择器用法实例
2014/12/31 Javascript
JavaScript错误处理
2015/02/03 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
详解在React里使用&quot;Vuex&quot;
2018/04/02 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
python多进程并发demo实例解析
2019/12/13 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
html5清空画布方法(三种)
2017/10/16 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
门卫班长岗位职责
2013/12/15 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
女儿满月酒致辞
2015/07/29 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
Nginx实现负载均衡的项目实践
2022/03/18 Servers