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>

赞 (0)

相关推荐

  • javascript DIV跟随鼠标移动

    首先介绍的是一个div跟随鼠标移动的效果,具体代码如下 javascript div跟随鼠标移动 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> window.o

  • javascript实现鼠标点击页面 移动DIV

    <script type="text/javascript"> //那种方式移动 var choMove = false; //是否绑定过click var isClick = true; //引用DIV var oDiv = null; //引用Input var oInput = null; //封装事件绑定的通用对象 var evnetUtil = { addEventHandle:function(oElement,evtype,fun){ oElement.att

  • 原生js实现键盘控制div移动且解决停顿问题

    原生js实现键盘控制div移动且解决停顿问题

    首先说明下为什么会停顿? 效果 :用键盘控制一个div移动 当按下一个方向键不放,div会先停顿一下,然后才开始持续移动. 原因:系统要区分用户是否连续输入,第一个到第二个之间有一个停顿时间 注:了解原因才能解决问题 效果展示 1.简单控制,但是有停顿 2.简单控制,解决停顿 解决方法 方法 :先开一个定时器,让div一直处于(往4个方向)准备移动的状态 初始4个方向的值都是false,div就保持在原地不动. 按下某个方向键,这个方向的值就改变为true,div就会开始往这个方向移动. 松开方

  • js+html+css实现鼠标移动div实例

    js: 复制代码 代码如下: var posX; var posY; fdiv = document.getElementById("divBody"); document.getElementById("divHead").onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - p

  • js拖动div 当鼠标移动时整个div也相应的移动

    HTML代码如下,其中,要拖动的div为最外层的div 复制代码 代码如下: <div id="dialog_createUserGroup" class="dialog_main" style=""> <div id="McreateUserGroup"> <div class="title"> <span class="poptitle"&g

  • JavaScript与Div对层定位和移动获得坐标的实现代码

    1:移动图层 获得点的x轴y轴坐标,从而进行绝对定位(注意:竖拉框会影响 x 轴 y 轴坐标值) 复制代码 代码如下: var x,y,z,down=false,obj function init(){ obj=event.srcElement //事件触发对象 obj.setCapture() //设置属于当前对象的鼠标捕捉 z=obj.style.zIndex //获取对象的z轴坐标值 //设置对象的z轴坐标值为100,确保当前层显示在最前面 obj.style.zIndex=100 x=e

  • js实现键盘控制DIV移动的方法

    本文实例讲述了js实现键盘控制DIV移动的方法.分享给大家供大家参考.具体分析如下: css样式部分: 复制代码 代码如下: <style type="text/css"> html,body{overflow:hidden;} body{margin:0;padding:0;} pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier

  • javascript实现点击按钮让DIV层弹性移动的方法

    本文实例讲述了javascript实现点击按钮让DIV层弹性移动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/

  • 利用javascript移动div层-javascript 拖动层

    利用javascript移动div层-javascript 拖动层: 程序功能:利用javascript开发在界面上随意拖动以下html code中的div层. javascript移动div层-javascript 拖动层代码-html code: 复制代码 代码如下: <div id="div_Info" style="display: none; dz-index: 101; left: 175px; width: 650px; position: absolut

  • js实现键盘操作实现div的移动或改变的原理及代码

    昨天记录了获取键盘按键的值的事件,有了值,无非就是针对不同值做不同的操作嘛,而且之前曾经在写贪吃蛇时也用到过.结果一捯饬,又是好久的一段时间,所以感觉有必要记录下的,一方面确有可取之处,另一方面也对自己的提醒,刚刚实现过的功能转头又是陌生人了,总的来说,算是温故而知新吧. 这样我们先来分析,要实现键盘操作实现div的移动大概的原理吧: *---要实现div的移动,首先最关键的一点:获取div对象 *---postion:absolute将div完全从文档流中拖出啊,这个地方漏掉了,回去看了贪吃蛇

随机推荐