<!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. php 获取数组第一个元素 以及最后一个元素 && 最后一个元素的键名

    1. current() 函数返回数组中的当前元素的值. 每个数组中都有一个内部的指针指向它的"当前"元素,初始指向插入到数组中的第一个元素. end() - 将内部指针指向数组中 ...

  2. Oracle中PL/SQL的执行部分和各种流程控制

    Oracle中PL/SQL的执行部分和异常部分 一.PL/SQL的执行部分. 赋值语句. 赋值语句分两种,一种是定义一个变量,然后接收用户的IO赋值:另一种是通过SQL查询结果赋值. 用户赋值举例: ...

  3. SpringMVC常用配置-配置DispatcherServlet映射请求路径的方式

  4. 在CentOS系统中使用yum安装指定版本软件的方法

    yum默认都是安装最新版的软件,这样可能会出一些问题,或者我们希望yum安装指定(特定)版本(旧版本)软件包.所以,就顺带分享yum安装指定(特定)版本(旧版本)软件包的方法. 过程如下: 假设这里是 ...

  5. XMLtank测试记录

    1.首先就是这个分辨率对于高分屏的电脑适应太差了....立马让我有弃的想法..(如图) 2.游戏结束之后每次都要从第一关开始,很不方便.建议加入选关功能. 3.鼠标控制不方便,尤其是左键和右键分别控制 ...

  6. 生产/消费 发送和接收消息---基于kombu和redis交互

    from kombu import Connection, Exchange, Queue media_exchange = Exchange('media', 'direct', durable=T ...

  7. 基于Spring4+SpringMVC4+Mybatis3+Hibernate4+Junit4框架构建高性能企业级的部标GPS监控平台

    开发企业级的部标GPS监控平台,投入的开发力量很大,开发周期也很长,选择主流的开发语言以及成熟的开源技术框架来构建基础平台,是最恰当不过的事情,在设计之初就避免掉了技术选型的风险,避免以后在开发过程中 ...

  8. Leetcode: Sequence Reconstruction

    Check whether the original sequence org can be uniquely reconstructed from the sequences in seqs. Th ...

  9. HTML之Hello World

    之前学过一段时间的HTML相关知识,但是已经有将近一年多时间没有用过了,曾经学过的知识基本都忘记了,所以要从头开始学习. 例子:Hello World <!DOCTYPE html> &l ...

  10. ADT(Android Developer Tools) GIT功能不全，远程提交的时候账户密码不能保存账户和密码解决方式

    需要安装Eclipse的GIT插件EGIT http://download.eclipse.org/egit/updates/