<!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. storm中几个概念的大小关系

    从图可以看出来:topology>supervisor>worker>excutor>task; 也就是说一个topology可以运行在多个supervisor上,一个supe ...

  2. 【Linux】Linux下使用Docker快速部署Oracle数据库

    安装最新Docker wget -qO- https://get.docker.com/ | sh` 安装 docker-compose sudo curl -L https://github.com ...

  3. 安恒杯11月月赛web题目-ezsql详细记录

    通过此题目可以学习到 1.通过load_file+like来盲注获取文件内容 2.php魔术方法__get函数的用法 3.bypass  linux命令过滤 题目中给了注册和登录的功能,没有源码泄露 ...

  4. CTPN_论文阅读总结

    论文全名:Detecting Text in Natural Image with Connectionist Text Proposal Network 1.摘要 (1)本文提出新型网络CTPN,用 ...

  5. 8、列表：ion-list

    1.基本样式 no-lines 属性 隐藏列表项之间的分割符 inset 属性 去掉 ion-list的 外边框. 默认 的 ion-list 是有外边框的.   /* ---示例代码----*/ & ...

  6. javascript方法重载惹的祸

    先贴出代码,看看执行结果会是什么? function ShowMsg() { //函数1 this.sure = function () { alert("ok"); }; //函 ...

  7. EF 取出demical数据，但需要去点小数，排序

    try { BasePaperWeightDAL.Get(o => o.IsDeleted == false && o.IsEnabled == true).OrderByDes ...

  8. SpringMVC:系统认识一下maven

    网上看了很多springMVC helloworld的教程,非常不满意:首先,maven构建的就很少,再者,绝大部分都是断章取义,让人不明就里.其中有几篇讲的好的,我摘录了一些,自己试着构建了一下项目 ...

  9. shiro 配置导图

    1 web.xml配置:shiro filter必须放在其他filter之前 <filter> <filter-name>shiroFilter</filter-name ...

  10. PAT 1076 Forwards on Weibo

    #include <cstdio> #include <cstdlib> #include <vector> #include <queue> #inc ...