<!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. Charts in Ionic

    Chart对于任何应用来说都是不可或缺的一部分,hybrid app也是如此. 先罗列一下有哪些可用的Chart library: D3.JS -- Data-Driven Documents,BSD ...

  2. 阿里云Tomcat运行shutdown.sh命令关闭时遇到的问题

    1.安装完成jdk之后,然后安装tomcat. tomcat安装成功后,进入tomcat的安装目录,找到bin所在的目录. 使用./startup.sh,启动tomcat; 使用./shutdown. ...

  3. BNU4299——God Save the i-th Queen——————【皇后攻击，找到对应关系压缩空间】

    God Save the i-th Queen Time Limit: 5000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      ...

  4. Javascript模块化编程(二)AMD规范(规范使用模块)

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块,先想一想,为什么模块很重要?接下来为您详细介绍,感兴趣的朋友可以了解下啊.今天介绍如何规范地使用模块. 七.模块 ...

  5. C#委托的好处

    C#委托的好处 先来看一个例子: 某人有三子,让他们各自带一样东西出门,并带回一头猎物. 可以理解为一种父亲对儿子的委托: 猎物  办法(工具 某工具) 三个人执行委托的方法各不相同 兔子 打猎(工具 ...

  6. DJango小总结二

    1.Django请求的生命周期    武彦涛:        路由系统 -> 试图函数(获取模板+数据=>渲染) -> 字符串返回给用户        2.路由系统    王腾:   ...

  7. js正则验证表达式

    //上传文件大小验证 $.fn.checkFileTypeAndSize = function (options) { //默认设置 var defaults = { allowedExtension ...

  8. webpack、babel模块、模块化

    一.webpack介绍 webpack这个工具非常强大,解决了前端很繁琐的一些工具流程繁琐的事情.中文官网链接地址:https://www.webpackjs.com/ 1.为什么要使用webpack ...

  9. 用户选择wordpress程序建站需要知道的一些事情 - 安全、优化速度、配置

    WordPress是我们使用最多的CMS程序之一,无论是我们的个人博客,还是企业网站,甚至中小型站点,我们都可以用WP程序部署.我们看到海外网站的时候,大部分都是用的WORDPRESS程序.在我们国人 ...

  10. Android自定义之ScrollView下拉刷新

    公司项目,需要用到ScrollView的下拉刷新,一开始使用的时候PullToRefresh三方库的下拉刷新,我比较纠结第三档库,很强大,但是,公司项目的需求,PullToRefresh就不能做到了, ...