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. UVA - 1606 Amphiphilic Carbon Molecules 极角扫描法

    题目:点击查看题目 思路:这道题的解决思路是极角扫描法.极角扫描法的思想主要是先选择一个点作为基准点,然后求出各点对于该点的相对坐标,同时求出该坐标系下的极角,按照极角对点进行排序.然后选取点与基准点 ...

  2. java入门---windows和Linux，UNIX，Solaris，FreeBSD下开发环境配置

        首先来看Windows下的操作.我们需要下载java开发工具包JDK.下载地址:http://www.oracle.com/technetwork/java/javase/downloads/ ...

  3. Java8新特性（一）——Lambda表达式与函数式接口

    一.Java8新特性概述 1.Lambda 表达式 2. 函数式接口 3. 方法引用与构造器引用 4. Stream API 5. 接口中的默认方法与静态方法 6. 新时间日期 API 7. 其他新特 ...

  4. Go中的系统Signal处理

    package main import "fmt" import "os" import "os/signal" import " ...

  5. TortoiseHg 学习笔记一

    因项目需要频繁的提交.合并代码,前段时间别人在我笔记本上装了个TortoiseHg,我不怎么会用 现在学习一下,目前没时间写太多东西,未完待续 记录一下查看的文章 http://jingyan.bai ...

  6. Eclipse AmaterasUML 安装及使用

    AmaterasUML 对于我来说,是一个非常好用的UML插件. 用它来将我写过的一些Android程序进行逆工程非常好用,只不过,不能体现出包,这是一个小小的遗憾. 这个是它的主页地址:http:/ ...

  7. windows本地连接腾讯云的mysql服务器

    由于最近数据库需要用上Navicat作为数据库,但是我的mysql装在腾讯云的Ubuntu上,因此需要做些配置开放端口,和监听端口,因此略显麻烦,这里记录一下连接的具体步骤,方便以后又得装(flag) ...

  8. （原创）白话KMP算法（续）

    第二章:KMP改良算法 第一章里面我们讲完了KMP算法的next数组实现法,回忆一下其实最重要的内容无非就是一.理解 i 指针无用回溯的意义,二.理解 j 指针的定位和模式串中每个元素重复度的关系,三 ...

  9. [POJ3585]Accumulation Degree

    题面 \(\text{Solution:}\) 有些题目不仅让我们做树型 \(\text{dp}\) ,而且还让我们换每个根分别做一次, 然后这样就愉快的 \(\text{TLE}\) 了,所以我们要 ...

  10. iOS-UIImageView播放动画

    NSArray *gifArray = [NSArray arrayWithObjects:[UIImage imageNamed:@"lanya1"],[UIImage imag ...