1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6.     <style type="text/css">
  7.         div {
  8.             width: 2px;
  9.             height: 2px;
  10.             background-color: red;
  11.             position: absolute;
  12.         }
  13.     </style>
  14.     <script type="text/javascript">
  15.         window.onload = function () {
  16.             var oDivs = document.getElementsByTagName('div');
  17.             document.onmousemove = function (ev) {
  18.                 var oEvent = ev || event;
  19.                 document.getElementsByTagName('span')[0].innerHTML = oEvent.clientY + '|' + oEvent.clientX;
  20.                 for (var i = oDivs.length-1; i > 0; i--) {
  21.                         oDivs[i].style.top = oDivs[i - 1].style.top;
  22.                         oDivs[i].style.left = oDivs[i - 1].style.left;
  23.                 }
  24.                 oDivs[0].style.top = oEvent.clientY+'px';
  25.                 oDivs[0].style.left = oEvent.clientX + 'px';
  26.             };
  27.  
  28.         };
  29.     </script>
  30. </head>
  31. <body>
  32.     <span></span>
  33.     <div></div>
  34.     <div></div>
  35.     <div></div>
  36.     <div></div>
  37.     <div></div>
  38.     <div></div>
  39.     <div></div>
  40.     <div></div>
  41.     <div></div>
  42.     <div></div>
  43.     <div></div>
  44.     <div></div>
  45.     <div></div>
  46.     <div></div>
  47.     <div></div>
  48.     <div></div>
  49.     <div></div>
  50.     <div></div>
  51.     <div></div>
  52.     <div></div>
  53.     <div></div>
  54.     <div></div>
  55.     <div></div>
  56.     <div></div>
  57.     <div></div>
  58.     <div></div>
  59.     <div></div>
  60.     <div></div>
  61.     <div></div>
  62.     <div></div>
  63.     <div></div>
  64.     <div></div>
  65.     <div></div>
  66.     <div></div>
  67.     <div></div>
  68.     <div></div>
  69.     <div></div>
  70.     <div></div>
  71.     <div></div>
  72.     <div></div>
  73.     <div></div>
  74.     <div></div>
  75.     <div></div>
  76.     <div></div>
  77.     <div></div>
  78.     <div></div>
  79.     <div></div>
  80.     <div></div>
  81.     <div></div>
  82.     <div></div>
  83.     <div></div>
  84.     <div></div>
  85.     <div></div>
  86.     <div></div>
  87.     <div></div>
  88.     <div></div>
  89.     <div></div>
  90.     <div></div>
  91.     <div></div>
  92.     <div></div>
  93.     <div></div>
  94.     <div></div>
  95.     <div></div>
  96.     <div></div>
  97.     <div></div>
  98.     <div></div>
  99.     <div></div>
  100.     <div></div>
  101.     <div></div>
  102.     <div></div>
  103.     <div></div>
  104.     <div></div>
  105.     <div></div>
  106.     <div></div>
  107.     <div></div>
  108.     <div></div>
  109.     <div></div>
  110.     <div></div>
  111.     <div></div>
  112.     <div></div>
  113.     <div></div>
  114.     <div></div>
  115.     <div></div>
  116.     <div></div>
  117.     <div></div>
  118.  
  119. </body>
  120. </html>

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

  1. div跟随鼠标移动

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

  2. 一组div跟随鼠标移动，反应鼠标轨迹

    <!DOCTYPE html> <html> <head> <title>div随鼠标移动</title> <style type=& ...

  3. javascript div跟随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 鼠标拖动div，div跟随鼠标移动效果

    <div id="boxDiv" style='width:20px;height:20px;position:absolute;background:red;'>   ...

  5. js 实现div跟随鼠标移动

    今天看到了一个自己可以随心所欲的拖到div到页面的任意位置.感觉挺好的,就心血来潮的查询了一下,看看网友做的 代码如下: <script>function doit(){ var obj ...

  6. JS错误记录 - 按左右箭头div移动、一串div跟着鼠标移动

    本次练习错误总结: 1. div跟着用户操作而移动,首先必须要绝对定位,否则无法移动. 2. if条件语句里面是双等号,不是单等号(赋值). 3. 坐标值没有Right,只能offsetLeft 加减 ...

  7. jquery对div元素进行鼠标移动（稍稍修改下可以实现div跟随鼠标）

    /* 网上找了资料都是对于event.clientX和offset().left进行了计算,但是去掉了这个计算方式,直接使用当前坐标也一样,效果都一样不太好 strHeader:标题 jquery定位 ...

  8. 【案例】DIV随鼠标移动而移动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. javascript元素跟随鼠标在指定区域运动

    元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. Nginx对于图片,js等静态文件的缓存设置

    以下是自学it网--中级班上课笔记 网址:www.zixue.it Nginx对于图片,js等静态文件的缓存设置 注:这个缓存是指针对浏览器所做的缓存,不是指服务器端的数据缓存. 主要知识点: loc ...

  2. php 写一个水仙花数的函数

    判断一个数是不是水仙花数 <?php function is_shuixianhua($i) { $length=strlen($i); $i=(string)$i; $sum=0; for($ ...

  3. 5步做好vsftpd

    系统:centos6.5 X86 1､yum -y install vsftpd 2､vim /etc/vsftpd/vsftpd.conf 可以用cat vsftpd.conf | grep -v ...

  4. MFC ListControl使用方法

    在原来博客中有:MF CListControl 简单功能使用 推荐文章:MFC类CtrlList用法 今天又又一次来介绍点新东西:双击击listcontrol  做出响应.当然你能够做的还有非常多,比 ...

  5. 【Android XMPP】 学习资料收集贴（持续更新）

    系列一: 基于xmpp openfire smack开发之openfire介绍和部署[1] 基于xmpp openfire smack开发之smack类库介绍和使用[2] 基于xmpp openfir ...

  6. COCOS2D-X 精灵创建随笔

    CCSprite类中创建Sprite的方法都是静态的: static CCSprite* create ( )  创建一个无图片显示的精灵,可随后用 setTexture 方法设置显示图片 stati ...

  7. ViewPager的用法和实现过程

    看图先:          页面中填充内容是随机关键词飞入和飞出动画效果,随后会更新,如今请先无视吧 首先是 导入jar包   下载地址:android-support-v4.jar 布局文件中加入v ...

  8. 用java读取properties文件--转

    今天为了通过java读取properties文件,google了很长时间,终于找到了.现在特记录之和大家一起分享.     下面直接贴出代码:java类 public class Mytest pub ...

  9. Day02 - Python 基本数据类型

    1 基本数据类型 Python有五个标准的数据类型: Numbers(数字) String(字符串) List(列表) Tuple(元组) Dictionary(字典) 1.1 数字 数字数据类型用于 ...

  10. MVC缓存,使用数据层缓存,添加或修改时让缓存失效

    在"MVC缓存01,运用控制器缓存或数据层缓存"中,在数据层中可以设置缓存的有用时刻.但这个还不够"智能",常常期望在修改或创立的时分使缓存失效,加载新的数据. ...