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. python2.7入门---Number(数字)

        今天咱们来简单分享一下关于python中的一种数据类型和操作方法.费话不多说哈,咱们直接来进行实践加理论.首先,我们要知道,Python Number 数据类型用于存储数.数据类型是不允许改变 ...

  2. .net Core错误记录

    检测到包降级 打开Nuget,找到对应的包,Microsoft.NetCore.App 此时提示'已被SDK隐式引用,若要更新该包,请更新所属的SDK' 啥鸟意思??? 不管,直接解决,首先,安装对应 ...

  3. Druid时序数据库常见问题及处理方式

    最近将Druid-0.10.0升级到Druid-0.12.1的过程中遇到一些问题,为了后期方便分析问题和及时解决问题,特此写这篇文章将工作中遇到的Druid问题及解决办法记录下来,以供其他人借鉴,其中 ...

  4. jq 一个强悍的json格式化查看工具

    本文来自网易云社区 作者:娄超 在web 2.0时代json这种直观.灵活.高效数据格式基本已经成为一种标准格式,从各种web api,到配置文件,甚至现在连mysql都开始支持json作为数据类型. ...

  5. javascript数据相关处理，序列化反序列化，数据编码与解码

    对象序列化简而言之,将对象转为字符串.在数据的传输过程中,经常会使用到对象序列化. javascript中常用的对象序列化:JSON.stringify(); javascript中常用的对象反序列化 ...

  6. MD5、SHA校验命令

    linux系统的软件很多时候都以境像的方式提供下载,但我们如何确实下载的文件是没有被篡改过的呢?Linux中一般用对下载的文件进行MD5和SHA校验来确认. MD5 我们拿iptraf软件来试验: 我 ...

  7. 『JavaScript』模仿接口

    JavaScript中并没有内置的创建或实现接口的方法.这里将利用JavaScript的灵活性,来实现与接口意义相同的功能. 什么是接口? 接口的好处: 接口提供了一种用以说明一个对象应该具有哪些方法 ...

  8. jmeter的基本使用过程

    jmeter的基本使用过程 接下来几周,我将通过视频的方式,录制下来jmeter的基本用法,方便大家参考学习 可能导图会随时调整

  9. JMeter-取样器

    JMeter取样器: 1.右键点击新建的线程组,选择Add---->Sampler---->HTTP Request:(如图) 2.新建取样器之后的界面如图: 3.根据上图中的数字标识解释 ...

  10. 【java并发编程实战】第八章：线程池的使用

    1.线程饥饿锁 定义:在线程池中,如果任务的执行依赖其他任务,那么可能会产生线程饥饿锁.尤其是单线程线程池. 示例: public class ThreadDeadStarveTest { publi ...