<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标跟随一串效果</title>
<style type="text/css">
div{
width: 30px;
height: 30px;
background: #008000;
position: absolute;
left: 10px;
top: 10px;
font-size: 18px;
border: 1px solid green;
border-radius: 50%;
color: white;
text-align: center;
padding: 10px;

}
</style>


<script type="text/javascript">

//页面加载完成后才执行

window.onload = function(){

// 获取页面div的元素节点

var divArray = document.getElementsByTagName("div");

document.onmousemove = function(evt){

var oEvent = evt || event;

//第一个div永远跟着鼠标最新的位置

divArray[0].style.left = oEvent.clientX + 20 + "px";
divArray[0].style.top = oEvent.clientY + 20 + "px";

//背景色随机改变



for(var i = divArray .length - 1;i > 0;i--){

//依次替换位置 "="表示赋值，不是表示相等
divArray [i].style.left = divArray[ i- 1].style.left;
divArray [i].style.top = divArray [i - 1].style.top;


var RNumber = parseInt(Math.random()*255);
var GNumber = parseInt(Math.random()*255);
var BNumber = parseInt(Math.random()*255);

divArray[i].style.background ="rgb("+RNumber+","+GNumber+","+BNumber+")";
}

}

}
</script>
</head>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>


</body>
</html>

贪吃蛇，JavaScript，效果，鼠标事件的更多相关文章

  1. "贪吃蛇"-css3效果

    clip  :  http://www.w3school.com.cn/cssref/pr_pos_clip.asp 姜糖水  :  http://www.cnphp6.com/archives/60 ...

  2. javascript基金会——鼠标事件，系统对话框，等等。

    1.鼠标事件 (1).onclick:用户点击鼠标左键,并且当焦点处于button准时,按用户Enter关键,发生onclick事件 (2).ondblclick:当用户双击鼠标左键.发生ondblc ...

  3. 每日分享！JavaScript的鼠标事件（11个事件）

    鼠标的11个事件 具体的事件解释如下: click:按下鼠标(通常是按下主按钮)时触发. dblclick:在同一个元素上双击鼠标时触发. mousedown:按下鼠标键时触发. mouseup:释放 ...

  4. JavaScript之鼠标事件

    事件三要素: 事件源.事件类型(点击onclick)=function(){ 事件触发后执行的代码 } 案例: function abb(a){ return document.getElementB ...

  5. 贪吃蛇 javaScript 谷歌浏览器浏览

    1.代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  6. javascript的鼠标事件---基础

  7. 原生JavaScript贪吃蛇

    在实例开发过程中还是能认识到很多不足的,并且加强了一些基础. 简单写一下制作过程: 1.创建画布 2.创建蛇和老鼠 坐标不能重叠 3.让蛇移动起来 4.添加死亡方法 5.添加转点坐标和方向 6.添加吃 ...

  8. unity像素贪吃蛇

    [ 星 辰 · 别 礼 ] 设计过程: 首先,在之前玩坏控制台做的那个c#贪吃蛇之后,我以为做unity会很简单,但事实比较不如人意...拖了好几天.因为过程中遇到一些问题 蛇身的移动,还是用列表,将 ...

  9. JavaScript实现的--贪吃蛇

    总的实现思路: 一.效果部分:  1.编写html代码,加上样式. 二.JavaScript部分:  1.利用dom方法创建一块草坪,即活动区域:   2.创建一条蛇,并设置其初始位置:       ...

  10. JavaScript版—贪吃蛇小组件

    最近在学习JavaScript,利用2周的时间看完了<JavaScript高级编程>,了解了Js是一门面向原型编程的语言,没有像C#语言中的class,也没有私有.公有.保护等访问限制的级 ...

随机推荐

  1. RFID电子标签天线的印刷

    RFID 电子标签技术又称RFID(Radio FrequencyIdentification)射频识别技术,是一种非接触式的自动识别技术,通过相距几厘米到几米距离内传感器发射的无线电波,可以读取RF ...

  2. 60个有用CSS代码片段

    1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: re ...

  3. 如何在Eclipse中查看JDK以及JAVA框架的源码（转载）

    原文链接:http://www.cnblogs.com/outlooking/p/5243415.html 设置步骤如下: 1.点 “window”-> "Preferences&qu ...

  4. 6. support vector machine

    1. 了解SVM 1. Logistic regression 与SVM超平面 给定一些数据点,它们分别属于两个不同的类,现在要找到一个线性分类器把这些数据分成两类.如果用x表示数据点,用y表示类别( ...

  5. vs2010/2013项目的C++所在文件夹越来越大如何解决？

    vs2010/2013项目所在文件夹越来越大如何解决? Tools->Options->Text Editor->C/C++->Advanced,在 Fallback Loca ...

  6. 利用pip安装模块（以安装pyperclip为例）

    >任务:利用pip安装pyperclip模块 >前提:你已经在你的电脑里面安装啦Python2.7的Windows版本,并且已经配置了环境变量 >实现步骤 >>打开你的P ...

  7. 使用命令行 Subversion 访问项目源文件（SVN）

    from:http://www.open.collab.net/scdocs/ddUsingSVN_command-line.html.zh-cn 命令行 Subversion 入门 如果您参与的项目 ...

  8. tar压缩

    tar 压 缩:tar -jcv -f filename.tar.bz2 要被压缩的文件或目录名称 查 询:tar -jtv -f filename.tar.bz2 解压缩:tar -jxv -f f ...

  9. Android中使用Handler造成内存泄露的分析和解决

    什么是内存泄露?Java使用有向图机制,通过GC自动检查内存中的对象(什么时候检查由虚拟机决定),如果GC发现一个或一组对象为不可到达状态,则将该对象从内存中回收.也就是说,一个对象不被任何引用所指向 ...

  10. ACM-JAVA基础

    ACM中的JAVA(基础) 众所周知,Java拥有良好的可移植性.无论在软件还是硬件领域,它都得到了广泛的使用,但是任何语言都有其缺陷,Java也不例外,Java运行在Java虚拟机上,因而相比C/C ...