<!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. Steamworks and Unity – P2P多人游戏

    之前我们讨论过“如何把Steamworks.Net和Unity整合起来”,这是一个很好的开始,现在我们研究深一点,谈一谈Steam中的多人游戏.这不是教程,但是可以指导你在你的游戏中如何使用Steam ...

  2. mvp需要加上单利模式

    最大的中介者,需要设置成单利模式

  3. Linux的应用层到底层驱动的调用过程

    应用层如何内核.md 1.从应用层打通内核:驱动 首先来说是设备号的引入,我们通过 cat/proc/kallsyms |grep mydevice 可以查看设备号,当然我们也是可以自己创建设备号,这 ...

  4. Hash索引和B+树索引总结

    先说Hash索引 在理想的情况下,key非常分散,不存在Hash碰撞的话,采用Hash索引可以唯一得确定一个key的位置,并且这个位置上就只有一个key,所以查找时间复杂度是O(1),非常快,这是Ha ...

  5. Coursera 机器学习 第7章 Support Vector Machines 学习笔记

    7 Support Vector Machines7.1 Large Margin Classification7.1.1 Optimization Objective支持向量机(SVM)代价函数在数 ...

  6. 【卷土重来之C#学习笔记】（三） 类的基本概念

    1.类的概述   程序的数据和功能被组织为逻辑上相关的数据项和函数的封装集合,并被称为类.   类是一个能存储数据并执行代码的数据结构. 它包含数据成员和函数成员: 数据成员:存储与类或类的实例相关数 ...

  7. 数据从mysql迁移到hbase的一些思考及设计

    一.进行迁移的原因 由于业务的发展,使用mysql进行建立索引进行搜索已经造成数据流的瓶颈卡在了数据库io,例如每次dump全表的时候,会造成压力过大,造成耗时很长,并且当前的数据量基本上已经达到了亿 ...

  8. 人民币金额大小写Js转换

    /** * 数字转中文 * @param dValue * @returns */ function chineseNumber(dValue) { var maxDec = 2; // 验证输入金额 ...

  9. oracle中时间戳转为Date类型的数据

    问题描述: 一个表中原本应该存放date类型的数据,但是不知道之前哪位大仙把两个字段的类型建成了NUMBER类型的了,这样在后台看时间肯定不方便.现在需要改成date类型,但是现在库中是有数据的,不能 ...

  10. Java读写锁

    Java读写锁,ReadWriteLock.java接口, RentrantReadWriteLock.java实现.通过读写锁,可以实现读-读线程并发,读-写,写-读线程互斥进行.以前面试遇到一个问 ...