div跟随鼠标移动的函数：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        function getPos(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};
        }

        document.onmousemove = function (ev) {
            var oEvent = ev || event;
            var oDiv = document.getElementById('div1');
            var pos = getPos(oEvent);

            oDiv.style.left = pos.x + 'px';
            oDiv.style.top = pos.y + 'px';
        };
    </script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

HTML：
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        function getPos(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};
        }

        document.onmousemove = function (ev) {
            var aDiv = document.getElementsByTagName('div');
            var oEvent = ev || event;

            var pos = getPos(oEvent);

            for (var i = aDiv.length - 1; i > 0; i--) {
                aDiv[i].style.left = aDiv[i - 1].offsetLeft + 'px';
                aDiv[i].style.top = aDiv[i - 1].offsetTop + 'px';
            }

            aDiv[0].style.left = pos.x + 'px';
            aDiv[0].style.top = pos.y + 'px';
        };
    </script>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</body>
</html>

运行结果（每一个div都跟着前面一个div，第一个div跟着鼠标）：
　　　　aaarticlea/png;base64,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" alt="" />

HTML（div跟随键盘移动）：
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style type="text/css">
        #div {
            width: 100px;
            height: 100px;
            background: #ff44c0;
            position: absolute;
        }
    </style>
    <script>

        document.onkeydown = function keyDown(ev)//按下键盘事件
        {
            var oEvent = ev || event;
            var oDiv = document.getElementById("div");
            var speed = 20;
            if (oEvent.keyCode == 37) {//键盘左键
                oDiv.style.left = oDiv.offsetLeft - speed + "px";
            } else if (oEvent.keyCode == 38) {//键盘右键
                oDiv.style.top = oDiv.offsetTop - speed + "px";
            } else if (oEvent.keyCode == 39) {//键盘上键
                oDiv.style.left = oDiv.offsetLeft + speed + "px";
            } else if (oEvent.keyCode == 40) {//键盘下键
                oDiv.style.top = oDiv.offsetTop + speed + "px";
            }

        };

    </script>
</head>

<body>
<div id="div"></div>
</body>
</html>
运行结果：
　　　　aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAb8AAACXCAIAAAAK+cLKAAAD1klEQVR4nO3UQU0FUBRDwS8O4TgDBzfwNk3TmVRAV+fzA8D/fdIHACqpJ8AL9QR4oZ4AL9ST09e3/XWMUU9O8SQVjTHqySmepKIxRj05xZNUNMaoJ6d4korGGPXkFE9S0RijnpziSSoaY9STUzxJRWOMenKKJ6lojFFPTvEkFY0x6skpnqSiMUY9OcWTVDTGqCeneJKKxhj15BRPUtEYo56c4kkqGmPUk1M8SUVjjHpyiiepaIxRT07xJBWNMerJKZ6kojFGPTnFk1Q0xqgnp3iSisYY9eQUT1LRGKOenOJJKhpj1JNTPElFY4x6coonqWiMUU9O8SQVjTHqySmepKIxRj05xZNUNMaoJ6d4korGGPXkFE9S0RijnpziSSoaY9STUzxJRWOMenKKJ6lojFFPTvEkFY0x6skpnqSiMUY9OcWTVDTGqCeneJKKxhj15BRPUtEYo56c4kkqGmPUk1M8SUVjjHpyiiepaIxRT07xJBWNMerJKZ6kojFGPTnFk1Q0xqgnp3iSisYY9eQUT1LRGKOenOJJKhpj1JNTPElFY4x6coonqWiMUU9O8SQVjTHqySmepKIxRj05xZNUNMaoJ6d4korGGPXkFE9S0RijnpziSSoaY9STUzxJRWOMenKKJ6lojFFPTvEkFY0x6skpnqSiMUY9OcWTVDTGqCeneJKKxhj15BRPUtEYo56c4kkqGmPUk1M8SUVjjHpyiiepaIxRT07xJBWNMerJKZ6kojFGPTnFk1Q0xqgnp3iSisYY9eQUT1LRGKOenOJJKhpj1JNTPElFY4x6coonqWiMUU9O8SQVjTHqySmepKIxRj05xZNUNMaoJ6d4korGGPXkFE9S0RijnpziSSoaY9STUzxJRWOMenKKJ6lojFFPTvEkFY0x6skpnqSiMUY9OcWTVDTGqCeneJKKxhj15BRPUtEYo56c4kkqGmPUk1M8SUVjjHpyiiepaIxRT07xJBWNMerJKZ6kojFGPTnFk1Q0xqgnp3iSisYY9eQUT1LRGKOenOJJKhpj1JNTPElFY4x6coonqWiMUU9O8SQVjTHqySmepKIxRj05xZNUNMaoJ8AL9QR4oZ4AL9QT4IV6ArxQT4AX6gnwQj0BXqgnwAv1BHihngAv1BPghXoCvFBPgBfqCfBCPQFeqCfAC/UEeKGeAC/UE+CFegK8UE+AF+oJ8EI9AV6oJ8AL9QR4oZ4AL9QT4IV6ArxQT4AX6gnwQj0BXqgnwAv1BHihngAv1BPghXoCvFBPgBfqCfBCPQFeqCfAC/UEeKGeAC/UE+CFegK8UE+AF7/bn+pJlw2HXQAAAABJRU5ErkJggg==" alt="" />


 

一串跟随鼠标的DIV的更多相关文章

  1. JS仿贪吃蛇：一串跟着鼠标的Div

    贪吃蛇是一款80后.90后比较熟悉的经典游戏,下面通过简单的JS代码来实现低仿版贪吃蛇效果:随着鼠标的移动,在页面中呈现所有Div块跟随鼠标依次移动,效果如下图所示. <!DOCTYPE htm ...

  2. 在jsp里面 当鼠标元素触发onmouseover时，旁边出现一个浮动且跟随鼠标的div ，移开消失

    JSP页面 : <label onmouseover="showLongStrlog(window.event, '<list:seqnum></list:seqnu ...

  3. JS学习笔记 - 封装getPosition函数、一串跟着鼠标的div

    function getPosition(ev) { var scrollTop = document.documentElement.scrollTop || document.body.scrol ...

  4. 鼠标悬浮控制元素隐藏与显示 - css中鼠标的hover状态

    需求:当鼠标移动到一个元素A身上时,另外一个元素B显示. 实现原理: A元素与B元素有一个相同的父级. B元素默认隐藏,A元素默认显示. 当鼠标移动到A元素身上时,也可以看做是移动到了A元素的父级身上 ...

  5. div 块跟随 鼠标点击

    js: $(document).ready(function () { $(".company-contact ul li").click(function (ev) {      ...

  6. Jquery几行代码解决跟随屏幕滚动DIV

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 【收藏】JS获取鼠标的X,Y坐标位置

    JS的方法: <html> <head> <meta http-equiv="Content-Type" content="text/htm ...

  8. 鼠标的change事件

    原本想着在<input>输入输入框中添加change事件,来实现对输入内容的限定. 当人们在使用时跟多的会直接去点击完成.所以完成按钮的点击事件会和change事件产生 冲突,所以我把验证 ...

  9. linux中如何使用微软鼠标的第4、5键

    虽说使用linux的 人大都对微软没什么好感,但不能否认微软确实也出了不少好东西呀,比如微软鼠标(IE系列) icon_smile.gif IE 2.0和以上版本都有5个按钮,除了正常的左中右外,两侧 ...

随机推荐

  1. R语言学习笔记（四）：apply，sapply，lapply，tapply，vapply以及mapply的用法

    apply() apply(m,dimcode,f,fargs) m 是一个矩阵. dimcode是维度编号,取1则为对行应用函数,取2则为对列运用函数. f是函数 fargs是f的可选参数集 > ...

  2. 【Leetcode】413. Arithmetic Slices

    Description A sequence of number is called arithmetic if it consists of at least three elements and ...

  3. ActiveMQ测试实例

    ActiveMQ的安装与启动 1 下载ActiveMQ:http://activemq.apache.org/download.html 2 下载后解压到任意文件夹,解压后文件夹内的目录为: 3 进入 ...

  4. goroutine 并发之搜索文件内容

    golang并发编程 - 例子解析 February 26, 2013 最近在看<Programming in Go>, 其中关于并发编程写得很不错, 受益非浅, 其中有一些例子是需要多思 ...

  5. 30分钟 带你浅入requirejs源码

    因为最近项目想现实一个单页功能,用的是react ,然后看了一下react route,挖槽 gzip后16k? 然后我简单写了一个纯单页(不支持多页的单页,所有入口都经过rewrite跑到index ...

  6. Java开发WebService（使用Java-WS）

    前言: 初学Java,因为工作需要,直接跳到开发WebService.以前用.NET开发过WebService,对比一下,Java的WebService开发部署难度高了不止一个档次.网上的教程各式各异 ...

  7. UIButton内部子控件自定义布局-“UIEdgeInsets”

    UIButton UIButton做frame动画时,不响应点击 在一个View内部加入几个按钮,然后改变这个view的frame来做动画,但是按钮不响应点击事件. 问题代码 __block CGRe ...

  8. tomcat 异常

    Removing obsolete files from server... Could not clean server of obsolete files: null java.lang.Null ...

  9. jmeter☞文件目录（一）

    Jmeter的文件目录如下图: 1.bin:可执行文件目录 a.jmeter.bat:Windows环境下的启动文件 b.jmeter.log:日志文件 c.jmeter.sh:Linux环境下的启动 ...

  10. Docker安装Zabbix全记录

    零.Zabbix架构设计 一.docker安装mysql 查找Docker Hub上的mysql镜像: [root@10e131e69e15 ~]# docker search mysql INDEX ...