编程 Javascript

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

Posted in Javascript onDecember 16, 2013

效果：

思路：

利用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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Jquery ui css framework

Jun 28 Javascript

javascript forEach通用循环遍历方法

Oct 11 Javascript

用js来获取上传的文件名纯粹是为了美化而用

Oct 23 Javascript

IE6-8中Date不支持toISOString的修复方法

May 04 Javascript

JS使用for循环遍历Table的所有单元格内容

Aug 21 Javascript

JS打开新窗口防止被浏览器阻止的方法

Jan 03 Javascript

javascript实现漂亮的拖动层，窗口拖拽特效

Apr 24 Javascript

js实现iPhone界面风格的单选框和复选框按钮实例

Aug 18 Javascript

jQuery中each()、find()和filter()等节点操作方法详解(推荐)

May 25 Javascript

javascript如何创建对象

Aug 29 Javascript

JS实现二维数组横纵列转置的方法

Apr 17 Javascript

使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）

Jun 05 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