<!DOCTYPE html>

<html>

<head>

	<title>div随鼠标移动</title>

	<style type="text/css">

		.ins{

			background:green;

			width:10px;

			height:10px;

			position:absolute;

			border-radius:10px;

		}

	</style>

</head>

<body>

   <div class="container"></div>

</body>

<script type="text/javascript">

function getElementByClassName(classnames){

    var objArray= new Array();//定义返回对象数组

    var tags=document.getElementsByTagName("*");//获取页面所有元素

    var index = 0;

    for(var i in tags){

        if(tags[i].nodeType==1){

            if(tags[i].getAttribute("class") == classnames){ //如果某元素的class值为所需要

                objArray[index]=tags[i];

                index++;

            }

        }

    }

    return objArray;

}  

	for(var i=0;i<50;i++){

		var div=document.createElement("div");

		div.setAttribute("class","ins");

		var container=getElementByClassName("container");

		container[0].append(div);

	}

    divs=getElementByClassName("ins");

    console.log(divs.length);

    document.onmousemove=function(ev){

         var oEvent=ev||event;

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

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

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

	    }

	    divs[0].style.left=oEvent.clientX+"px";

		divs[0].style.top=oEvent.clientY+"px";

    }

</script>

</html>

　　

一组div跟随鼠标移动，反应鼠标轨迹的更多相关文章

  1. div跟随鼠标移动

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

  2. 【案例】鼠标按下，DIV跟随移动

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

  3. jQuery事件-div的显示隐藏及鼠标的移入移出

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

  4. Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle

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

  5. c#全局鼠标事件以及鼠标事件模拟

    最近在编写Max插件时,其主容器FlowLayoutPanel由于隐藏了滚动条,要实现按住鼠标中键上下拖动的功能,因此尝试了全局鼠标事件.以及鼠标勾子,可惜由于Max不争气?都未能实现,于是代码报废, ...

  6. 模拟在table中移动鼠标，高亮显示鼠标所在行

    在项目中有这样一个需求,在table中移动鼠标时,鼠标所在行高亮显示,其他行正常显示,为此做了一个模拟. 具体代码如下: <!DOCTYPE html> <html xmlns=&q ...

  7. WPF，强制捕获鼠标事件，鼠标移出控件外依然可以执行强制捕获的鼠标事件

    在WPF中,只有鼠标位置在某个控件上的时候才会触发该控件的鼠标事件.例如,有两个控件都注册了MouseDown和MouseUp事件,在控件1上按下鼠标,不要放开,移动到控件2上再放开.在这个过程中,控 ...

  8. 用VBS控制鼠标（获取鼠标坐标、鼠标移动、鼠标单击、鼠标双击、鼠标右击）

    Demon's Blog 忘记了,喜欢一个人的感觉 Demon's Blog  »  程序设计  »  用VBS控制鼠标(获取鼠标坐标.鼠标移动.鼠标单击.鼠标双击.鼠标右击) « bbPress积分 ...

  9. javascript 一串DIV跟随鼠标移动

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

随机推荐

  1. cotex_A7/A9:

    A7与A9的比较:A7计算性能(DMIPS)不如A9(编号越大计算能力越强),但A7功耗更先进,作为A15的协处理器.A8是单核.

  2. 实现Docker跨主机间的容器网络联通

    Server1(Server) 192.168.81.58 内核版本 3.10.0-123.el7.x86_64 Docker版本 1.12.6Server2(Agent)  192.168.81.5 ...

  3. 安装Drupal

    我在虚拟机里面安装了Ubuntu Server 14.参考https://www.digitalocean.com/community/tutorials/how-to-install-drupal- ...

  4. gulp优化hexo方法

    gulp通过对站点使用的静态资源进行压缩,来优化网站的访问速度. 首先安装gulp以及所需要的模块: npm install gulp -g npm install gulp-htmlclean gu ...

  5. redis安装配置远程连接

    一.安装redis linux上直接yum安装 yum install redis windows版本下载地址 https://github.com/ServiceStack/redis-window ...

  6. unity的assetbundle的自动命名，以我的命名lua为例

    static string testDir = "Assets/LuaScripts/"; [MenuItem("测试/lua命名")] public stat ...

  7. python中时间对象生成及时间格式的转换

    1.将字符串的时间转换为时间戳 方法: a = "2013-10-10 23:40:00" 将其转换为时间数组 import time timeArray = time.strpt ...

  8. windows环境下MySQL-5.7.12-winx64下载安装与配置

    系统:64位Win-7 官网压缩包:mysql-5.7.12-winx64.zip 前后花了一些时间,以前都是下载软件直接安装在本地,现在这个不一样,下载压缩包后要解压缩到安装目录,然后在控制台下配置 ...

  9. js event事件绑定的方法

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

  10. （二） 修改IDEA自带的 maven 仓库

    详细可见教程 :https://www.yiibai.com/testng/ 1.新建一个maven项目 Maven简介: Maven是一个项目管理和综合工具.Maven提供了开发人员构建一个完整的生 ...