一组div跟随鼠标移动,反应鼠标轨迹
<!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跟随鼠标移动,反应鼠标轨迹的更多相关文章
- div跟随鼠标移动
1.目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法. 1)获取鼠 ...
- 【案例】鼠标按下,DIV跟随移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery事件-div的显示隐藏及鼠标的移入移出
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- c#全局鼠标事件以及鼠标事件模拟
最近在编写Max插件时,其主容器FlowLayoutPanel由于隐藏了滚动条,要实现按住鼠标中键上下拖动的功能,因此尝试了全局鼠标事件.以及鼠标勾子,可惜由于Max不争气?都未能实现,于是代码报废, ...
- 模拟在table中移动鼠标,高亮显示鼠标所在行
在项目中有这样一个需求,在table中移动鼠标时,鼠标所在行高亮显示,其他行正常显示,为此做了一个模拟. 具体代码如下: <!DOCTYPE html> <html xmlns=&q ...
- WPF,强制捕获鼠标事件,鼠标移出控件外依然可以执行强制捕获的鼠标事件
在WPF中,只有鼠标位置在某个控件上的时候才会触发该控件的鼠标事件.例如,有两个控件都注册了MouseDown和MouseUp事件,在控件1上按下鼠标,不要放开,移动到控件2上再放开.在这个过程中,控 ...
- 用VBS控制鼠标(获取鼠标坐标、鼠标移动、鼠标单击、鼠标双击、鼠标右击)
Demon's Blog 忘记了,喜欢一个人的感觉 Demon's Blog » 程序设计 » 用VBS控制鼠标(获取鼠标坐标.鼠标移动.鼠标单击.鼠标双击.鼠标右击) « bbPress积分 ...
- javascript 一串DIV跟随鼠标移动
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
随机推荐
- llinux 目录结构 及Linux文件分享
llinux 基础命令 及个人Linux文件分享 一, root用户名 @ 分隔符 kingle 主机名 ~当前所在目录 # root权限 $ 没分配权限用户 二, 书写格式:空格 [命令参数] 空格 ...
- python 管理多版本之pyenv
一, [root@management ~]# pyenv install -listAvailable versions: 3.3.0 3.3.1 3.3.2 3.3.3 3.3.4 3 ...
- VS 连接数据库报错:在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误
VS报错:在与 SQL Server 建立连接时出现与网络相关的或特定于实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且 SQL Server 已配置为允许远程连接. (provider ...
- Git使用教程,感觉比较全,所以【转载】
一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...
- [转]MVC系列——MVC源码学习:打造自己的MVC框架(一:核心原理)
本文转自:http://www.cnblogs.com/landeanfen/p/5989092.html 阅读目录 一.MVC原理解析 1.MVC原理 二.HttpHandler 1.HttpHan ...
- WPF的项目,ListBox 纵向滚动条不显示
最近在做WPF的项目,ListBox 纵向滚动条不显示,但是鼠标滚轮可以在ListBox中使用,但是必须要出现纵向滚动条. 索性就直接在listBox外面包裹一个ScrollViewer. Scro ...
- 安装VS2013时,如何避开IE10的限制
安装VS2013时,如何避开IE10的限制 VS就会告诉我们目前环境不适合安装VS2013,必须升级IE版本到IE10. 如果不想安装IE10,有没有办法呢? 答案肯定是有的. 将下面一段文字,储存为 ...
- oracle学习篇七:更新操作、事务处理
----------------1.数据库更新操作----------------------------- select * from tab;--查询表 drop table siebel_use ...
- 从零开始的全栈工程师——JS面向对象(复习)
作用域 栈内存:js执行的环境堆内存:存放代码块的空间 存放方式 键值对形式存放 字符串的形式存放js在执行之前 浏览器会给他一个全局作用域叫window 每个作用域下都分为两个模块 一个是内存模块一 ...
- sort遇到的问题
var arr = [2,10,6,9,7,8]; var arr1 = arr.sort(); var arr2 = arr.sort(function(a,b){ if (a>b){ ret ...