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

最新推荐文章于 2023-07-05 23:37:25 发布

艾小萱

最新推荐文章于 2023-07-05 23:37:25 发布

阅读量857

点赞数

分类专栏：脚本

本文链接：https://blog.csdn.net/xiaoxuanyunmeng/article/details/17376867

版权

脚本专栏收录该内容

109 篇文章 0 订阅

订阅专栏

这篇文章主要介绍了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');
            unity3d脚本http://www.unitymanual.com/
            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>

艾小萱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS onmousemove鼠标移动坐标接龙DIV效果实例

这篇文章主要介绍了JS onmousemove鼠标移动坐标接龙DIV效果实例，有需要的朋友可以参考一下效果：[在新窗口打开图片] 思路：利用onmousemove事件，然后获取鼠标的坐标，之后把DIV挨个遍历，最后把鼠标的坐标赋给DIV。代码：代码如下: div {
复制链接

扫一扫