多个小方块的运动

一个div跟着一个div运动,第一个div跟着鼠标运动,就可以有一串div跟着鼠标运动起来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div{width:10px; height:10px; background:#F00; position:absolute;}
</style>
<script>
function getPos(ev)
{
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
	return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}
document.onmousemove=function(ev)
{
	var aDiv=document.getElementsByTagName(‘div‘);
	var aEvent=ev||event;
	for(var i=aDiv.length-1;i>0;i--){
		aDiv[i].style.left=aDiv[i-1].offsetLeft+‘px‘;//后一个跟着前一个div移动
		aDiv[i].style.top=aDiv[i-1].offsetTop+‘px‘;
	}
	var pos=getPos(aEvent);
	aDiv[0].style.left=pos.x+‘px‘;
	aDiv[0].style.top=pos.y+‘px‘;
}
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
时间: 2024-12-28 00:51:05

多个小方块的运动的相关文章

第八讲:HTML5中canvas实现小球击打小方块游戏

源代码:http://download.csdn.net/detail/liumingm900913/7469969 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,在对div标签加上一些样式,利于观看 <div id="main"> <!--将画布嵌在div块里面,使其可以居中--> <canvas id="liuming_canvas" width="300px" heigh

HTML5中canvas实现小球击打小方块游戏

源代码:http://download.csdn.net/detail/liumingm... 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看. <div id="main"> <!--将画布嵌在div块里面,使其可以居中--> <canvas id="liuming_canvas" widt

百度前端技术学院task35源代码——听指令的小方块3

任务描述 如图,命令输入框由input变为textarea,可以允许输入多条指令,每一行一条 textarea左侧有一列可以显示当前行数的列(代码行数列),列数保持和textarea中一致 当textarea发生上下滚动时,代码行数列同步滚动 能够判断指令是否合法,不合法的指令给出提示(如图) 点击执行时,依次逐条执行所有命令 对于GO,TRA以及MOV指令增加可以移动格子数量的参数,例如 GO 3:向当前方向前进三格 TRA TOP 2:向屏幕上方平移两格 MOV RIG 4:方向转向屏幕右侧

JavaScript-在当前显示区范围内实现点不到的小方块

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>在当前显示区范围内实现点不到的小方块</title> 6 <style> 7 div{position:fixed;width:50px;height:50px; 8 background-color:pink; 9 } 10 </style> 11 1

听指令的小方块

效果静态图 通过输入指令,修改小方块的方向,使用键盘的上下左右四个键移动小方块. 小方块移动的范围: <div class="box"> <div class="background"> <div class="line00"></div> <div class="line01"></div> <div class="line02"

jfreechart在Linux上出现乱码,小方块解决方案

window环境下出现乱码可能是jfreechart类库版本高.在Linux出现小方块乱码解决方式. 原因: jre缺少中文字库1.以root用户登录到系统,切换到jdk_home/jre/ lib/fonts目录下执行 mkdir fallback 新建一   个目录:2.把simsun.ttc 上传到fallback目录,执行 cp simsun.ttc simsun.ttf 复制一份: 点击simsun.ttc下载地址:http://files.cnblogs.com/jiabaode/s

Qt文件编程 换行处显示小方块问题【已解决】

使用Qt写一个hex合并程序,遇到了在window下换行显示小方块问题,如下图: 通过查看Qt自带的帮助文档关于openMode的介绍,找到解决办法: 在Qt的文件打开代码中都添加 | QIODevice::Text问题即可解决. 如下:

百度前端学院task33源码及总结——听指令的小方块

任务描述 如图,实现一个类似棋盘的格子空间,每个格子用两个数字可以定位,一个红正方形的DOM在这个空间内,正方形中的蓝色边表示这是他的正面,有一个input输入框 在输入框中允许输入如下指令,按下按钮后,使得正方形做相应动作 GO:向蓝色边所面向的方向前进一格(一格等同于正方形的边长) TUN LEF:向左转(逆时针旋转90度) TUN RIG:向右转(顺时针旋转90度) TUN BAC:向右转(旋转180度) 移动不能超出格子空间 分析: 源代码: <!doctype html> <h

颜色随机的小方块

用碎片加载小方块实现简单的随机色块,直接上代码,如果你嫌麻烦,可以看demo:http://codepen.io/koringz/pen/QbZEwx /**/js注释已删 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf