麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > JavaScript > 正文

JS onmousemove鼠標移動坐標接龍DIV效果實例

2019-11-20 21:27:18
字體：大 中 小
供稿：網(wǎng)友

效果：

 

思路：

利用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);     //確定兼容性后，利用鼠標移動坐標的函數(shù)來取得橫縱坐標
            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>

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板： 欧美性成人| 欧美一级鲁丝片免费看 | 欧美亚洲国产成人 | 色婷婷av一区二区三区久久 | 国产成年人小视频 | 国产一级aaa全黄毛片 | 国产精品久久久久久婷婷天堂 | 日韩欧美精品中文字幕 | 午夜视频在线观 | 亚洲视频在线观看免费视频 | 综合网日日天干夜夜久久 | 久久成人综合网 | 成人毛片视频在线观看 | 欧美成在线视频 | 中文字幕在线观看二区 | 国产资源视频在线观看 | 毛片免费视频在线观看 | 黄色男女视频 | 色婷婷av一区二区三区久久 | 永久av在线免费观看 | 羞羞视频免费观看入口 | 91精品国产91 | 91精品国产综合久久久欧美 | 中文字幕一区二区三区久久 | 久久影院一区二区三区 | 国产在线一区二区三区 | 一区二区三区黄色 | 久操福利视频 | 青草久久av | 中文字幕免费播放 | 欧美黑人伦理 | 日韩视频www | 毛片在线免费观看网址 | 美女av在线免费观看 | 天天操天天骑 | 97中文字幕第一一一页 | 国产91av视频 | 亚洲最大久久 | 欧美激情视频一区二区免费 | 成人三级免费电影 | 国内精品久久久久久2021浪潮 |