<!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. Get the largest sum of contiguous subarray in an int array

    When I finished reading this problem,I thought I could solve it by scanning every single subarray in ...

  2. make it clear how to use const in C++

    1.first of all,take a lookup on the left side of keyword const.If there is something(type or pointer ...

  3. JavaScript 各种遍历方式详解

    为了方便例子讲解,现有数组和json对象如下 var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']; v ...

  4. seq命令

    seq 5 seq 5 >1.txt 其中的>是覆盖 seq 1 5 用来产生从数1到数5之间的所有整数 或, seq 5

  5. 关于附件控件隐藏后，在IE下不能上传，报“拒绝访问”

    报错时的使用: @Html.TextBoxFor(m => m.FileName, new { style = "width:457px;", @readonly = &qu ...

  6. 用slf4j统一管理日志总结

    用slf4j统一管理日志总结 参考网页:http://www.slf4j.org/ 一．使用slf4j统一管理并配置统一使用log4j日志 使用的jar:(slf4j-api-1.7.5.jar,jc ...

  7. 用JAX-WS在Tomcat中公布WebService

    JDK中已经内置了Webservice公布,只是要用Tomcat等Webserver公布WebService,还须要用第三方Webservice框架. Axis2和CXF是眼下最流行的Webservi ...

  8. bash if 表达式

    .bash把[[ $a -lt $b ]]看作一个单独的元素,并且返回一个退出码.退出码0为真,非零为假 例如: a= b=c [[ $a -lt $b ]] echo $? # a小于b为真 [[ ...

  9. Obj2002java

    计算球体积 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  10. VIM中文乱码（_vimrc配置文件备份）

    _vimrc在用户目录下: set fileencodings=ucs-bom,utf-,cp936,gb18030,big5,euc-jp,euc-kr,latin1 set encoding=ut ...