彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > JS onmousemove鼠标移动坐标接龙DIV效果实例

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

发布时间:2019-09-03 11:51编辑:学会党委浏览(87)

    效果:

    图片 1

     

    思路:

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

    思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV。 代码: 复制代码 代码如下: hea...

    本文由彩世界平台发布于学会党委,转载请注明出处:JS onmousemove鼠标移动坐标接龙DIV效果实例

    关键词: