<!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. Oracle 基础系列之1.2 oracle的基本使用

    在1.1的安装过程完成之后,进入第二部分,oracle的基本使用,在使用前,首先测试下,oracle是否安装成功,以及检查oracle的关键服务时候开启 1.首先测试下,oracle是否安装成功 打开 ...

  2. 牛客网Java刷题知识点之内存溢出和内存泄漏的概念、区别、内存泄露产生原因、内存溢出产生原因、内存泄露解决方案、内存溢出解决方案

    不多说,直接上干货! 福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑          ...

  3. Hashtable和HashMap的区别，Properties类的简单使用

    一.Java Properties类 Java中有个比较重要的类Properties(Java.util.Properties),主要用于读取Java的配置文件,各种语言都有自己所支持的配置文件,配置 ...

  4. php高手干货【必看】

    1.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的"函数&quo ...

  5. URAL —— 1255 & HDU 5100——Chessboard ——————【数学规律】

    用 k × 1 的矩形覆盖 n × n 的正方形棋盘 用 k × 1 的小矩形覆盖一个 n × n 的正方形棋盘,往往不能实现完全覆盖(比如,有时候 n × n 甚至根本就不是 k 的整倍数). 解题 ...

  6. node.js mysql 使用总结

    npm install mysql 使用mysql连接池 let mysql = require('mysql'); let db_config = { "connectionLimit&q ...

  7. windows下配置nginx环境

    一. nginx软件拷贝 拷贝 nginx文件 到对应的服务目录中 如 E:/service/nginx nginx文件地址: 链接: http://pan.baidu.com/s/1c25oq6O ...

  8. 【代码笔记】Java深入学习——实现客户端发送文件到服务器的文件传输

    Server.java package com.huaxin.lesson02; import java.io.FileOutputStream; import java.io.InputStream ...

  9. mybatis3 step by step 快速上手

    作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/6895617.html 原创文章,转载请注明作者和出处,未经允许不可用于商业营利活动 官方网站 h ...

  10. 龙珠直播之swot

    版本 v 0.3 龙珠直播有品牌优势,依托于苏宁PPTV,有大背景,有体育视频资源可用. 龙珠内容没有特色,没有特别火的亮点,定位于体育,没有免费路线,不能吸引大量活跃用户,女主播方式也没十分特点,解 ...