<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 10px;
height: 10px;
margin: 5px;
position: absolute;
}
</style>
<script>
function getPos(ev){
var rollTop = document.documentElement.scrollTop || document.body.scrollTop;
var rollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

//返回一个Json
return {x: ev.clientX + rollLeft , y: ev.clientY + rollTop};
}
document.onmousemove = function(ev){
var allDiv = document.getElementsByTagName('div');
var oEvent = ev||event;
var pos = getPos(oEvent);

for(var i=allDiv.length-1;i>0;i--){
//后一个div的位置等于前一个div的位置
allDiv[i].style.left = allDiv[i-1].offsetLeft + 'px';
allDiv[i].style.top = allDiv[i-1].offsetTop + 'px';
}

//将第一个div左边设置为鼠标的位置
allDiv[0].style.left = pos.x + 'px';
allDiv[0].style.top = pos.y + 'px';
};

</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div>L</div>
<div>o</div>
<div>v</div>
<div>e</div>
<div></div>
<div>h</div>
<div></div>
<div>u</div>
<div></div>
<div>x</div>
<div></div>
<div>i</div>
<div></div>
<div>a</div>
<div></div>
<div>o</div>
<div></div>
<div>w</div>
<div></div>
<div>e</div>
<div></div>
<div>n</div>
<div></div>
<div>h</div>
<div></div>
<div>u</div>
<div></div>
<div>x</div>
<div></div>
<div>i</div>
<div></div>
<div>a</div>
<div></div>
<div>o</div>
<div></div>
<div>w</div>
<div></div>
<div>e</div>
<div></div>
<div>n</div>
<div></div>

</body>
</html>

鼠标移动事件（跟随鼠标移动的div）的更多相关文章

  1. Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现

    Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...

  2. CSS鼠标响应事件经过、移动、点击示例介绍

    本文为大家介绍下CSS 鼠标响应事件:鼠标经过CSS.鼠标移动CSS.鼠标点击CSS以及示例,喜欢的朋友可以参考下   几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onM ...

  3. PyQt(Python+Qt)学习随笔：Qt Designer中部件的是否接受鼠标拖放事件的acceptDrops属性及含义

    acceptDrops属性表示当前部件是否接受鼠标拖放事件,鼠标拖放应该是与鼠标拖拽结合在一起的,在Qt Designer中可以通过属性acceptDrops设置部件是否接受鼠标拖放事件.如果部件接受 ...

  4. JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习

    JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...

  5. div跟随鼠标移动

    1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...

  6. 阻止右键菜单（阻止默认事件）&&跟随鼠标移动（大图展示）&&自定义右键菜单

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

  7. 一款基于TweenMax跟随鼠标单击移动的div

    今天给大家分享一款基于TweenMax跟随鼠标单击移动的div.在这款实例中你可以单击任意位置,div会移动到你单击的位置.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  8. html页面设置一个跟随鼠标移动的DIV（jQuery实现）

    说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...

  9. 【翻译】使用CSS3和jQuery制作跟随鼠标方位的Hover特效

    今天我们来学习如何通过CSS3的特性和jQuery来创建一个感知鼠标滑动方向的hover效果.当鼠标滑进的时候,遮罩层会从上次鼠标滑出的方向滑入,当鼠标滑出的时候,遮罩层会跟随鼠标,从鼠标滑出的方向滑 ...

  10. js进阶 12-3 如何实现元素跟随鼠标移动

    js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...

随机推荐

  1. 运算符重载入门demo

    #include "pch.h" #include <iostream> using namespace std; class A { public: A(int x, ...

  2. Git sparse-checkout 检出指定目录或文件

    根据网上资料整理而来,git 1.7版本后支持的sparse checkout特性,可以指定需要checkout的目录或者文件. # 设置允许git克隆子目录 git config core.spar ...

  3. Flutter Dialog 屏蔽返回键

    使用 WillPopScope + Future.value(false); 屏蔽返回键.代码如下: showDialog<Null>( context: context, // Buil ...

  4. jquery-ui Datepicker 创建 销毁

    控件选项defaultDate 设置日期控件的默认日期(高亮显示的日期),如果没有设置该选项,那么就使用当前日期,这一选项只适用于input元素没有设置value属性的情况altField 额外自定一 ...

  5. RabbitMQ的TopicExchange通配符问题

    TopicExchange交换机支持使用通配符*.# *号只能向后多匹配一层路径. #号可以向后匹配多层路径.

  6. 解决执行maven项目出现 SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder”. error

    最近再弄maven项目,运行起来没有问题,但是Console控制台会报错,比如说如下的问题异常提示: 由此我们可以看出,报出错误的地方主要是slf4j的jar包,而故障码中“Failed to loa ...

  7. JAVA统计一定范围内的质数个数

    public class TestNumber{ public static void main(String[] args){ System.out.println(roundPrimeCount( ...

  8. Jmeter基础元件

    测试计划 1.Test Plan (测试计划) 用来描述一个性能测试,包含与本次性能测试所有相关的功能.也就说JMeter创建性能测试的所有内容是于基于一个计划的. 下面看看一个计划下面都有哪些功能模 ...

  9. Junit打包测试

    在一个项目中,只写一个测试类是不可能的,我们会写出很多很多个测试类.可是这些测试类必须一个一个的执行,也是比较麻烦的事情. 鉴于此, JUnit 为我们提供了打包测试的功能,将所有需要运行的测试类集中 ...

  10. java ee的map