<!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. 题目1010：A + B(字符串拆分)

    问题来源 http://ac.jobdu.com/problem.php?pid=1010 问题描述 给我们一行标准的字符串,整行读入之后,把它拆开转换成数字进行计算. 问题分析 首先考虑一个问题:如 ...

  2. SQL语句之用户管理

    SQL语句系列 1.SQL语句之行操作 2.SQL语句之表操作 3.SQL语句之数据库操作 4.SQL语句之用户管理 占坑,待写……

  3. Linux and Shell 实用命令

    -name '*.jar' -printf '%p:' ### 查看CPU使用率 mpstat -P ALL

  4. python3 md5

    参考: https://docs.python.org/3/library/hashlib.html?highlight=hashlib#credits https://blog.csdn.net/w ...

  5. Linux 时间日期类、搜索查找类、 压缩和解压类指令

    l 时间日期类 date指令-显示当前日期 基本语法 1) date (功能描述:显示当前时间) 2) date +%Y (功能描述:显示当前年份) 3) date +%m (功能描述:显示当前月份) ...

  6. proxy写监听方法,实现响应式

    var data = { price: 5, quantity: 2 };var data_without_proxy = data; // 保存源对象data = new Proxy(data_wi ...

  7. mysql 必知必会总结

    以前 mysql 用的不是很多, 2 天看了一遍 mysql 必知必会又复习了一下基础.  200 页的书,很快就能看完, 大部分知识比较基础, 但还是了解了一些以前不知道的知识点.自己做一个备份,随 ...

  8. RESTful简单介绍

    1 什么是restful Restful就是一个资源定位及资源操作的风格.不是标准也不是协议,只是一种风格.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制. 资源:互联网所有的事物都 ...

  9. Google推荐的图片加载库Glide

    英文原文 Introduction to Glide, Image Loader Library for Android, recommended by Google 首发地址  http://jco ...

  10. Django查询一个权限中包含哪些用户

    Django查询一个权限中包含哪些用户 Django的Permission对象中没有直接查询相关用户的信息,而都是通过User对象来查询某个用户有哪些权限,例如: user.objects.get(u ...