<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        div {

            width: 2px;

            height: 2px;

            background-color: red;

            position: absolute;

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var oDivs = document.getElementsByTagName('div');

            document.onmousemove = function (ev) {

                var oEvent = ev || event;

                document.getElementsByTagName('span')[0].innerHTML = oEvent.clientY + '|' + oEvent.clientX;

                for (var i = oDivs.length-1; i > 0; i--) {

                        oDivs[i].style.top = oDivs[i - 1].style.top;

                        oDivs[i].style.left = oDivs[i - 1].style.left;

                }

                oDivs[0].style.top = oEvent.clientY+'px';

                oDivs[0].style.left = oEvent.clientX + 'px';

            };

        };

    </script>

</head>

<body>

    <span></span>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</body>

</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. What does the “__block” keyword mean?

    It tells the compiler that any variable marked by it must be treated in a special way when it is use ...

  2. 选择服务器OS标准

    稳定性.可靠性.兼容性.高效率.可持续,五大标准; recommend always using the stable version for production environments http ...

  3. Linux如何查找文件安装路径？

    Linux中查看某 个软件的安装路径(地址)有时显得非常重要.比如某个文件的快速启动项被删除,或者你要建立快速启动项,或者想删除. 添加安装文件等等,很多地方都要用到查案文件安装路径的命令. 这里给大 ...

  4. 【转】git - 简明指南

    git - 简明指南 助你入门 git 的简明指南,木有高深内容 ;) 作者:罗杰·杜德勒 感谢:@tfnico, @fhd 和 Namics其他语言 english, deutsch, españo ...

  5. javascript排序 查找算法大全

    在pptv的实习结束了, 忙着找工作的事,顺便把数据结构的那本书重新复习了一遍.为了加深印象,特意把里面的常用的排序.查找算法用js写了一遍 具体的实例在我的github上,大家可以访问的: http ...

  6. mysql left( right ) join 使用on 与where的差异

    之前一直很困扰为什么left join要么一查没有数据,要么出现很多条重复数据. 百思不得其解,后来在网上到处找资料,总算明白了. 一定要理解下面几点:  (1)主表条件在on后面时附表只取满足主表筛 ...

  7. SAP HANA STRING_AGG

    HANA Version 1.00.73.00.389160 不支持STRING_AGG,所以只能,,,,,,,, DROP PROCEDURE ""."ZCONCAT_ ...

  8. ABAP(笔记)

    1.excel表格上传 *&---------------------------------------------------------------------* ** 程序名称:ZSD ...

  9. Bootstrap-模态框Modal使用

    传值使用JavaScript方式吧,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  10. 《linux程序设计》--读书笔记--第十四章信号量、共享内存和消息队列

    信号量:用于管理对资源的访问: 共享内存:用于在程序之间高效的共享数据: 消息队列:在程序之间传递数据的一种简单方法: 一.信号量 临界代码:需要确保只有一个进程或者一个执行线程可以进入这个临界代码并 ...