<!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. 视觉机器学习读书笔记--------BP学习

    反向传播算法(Back-Propagtion Algorithm)即BP学习属于监督式学习算法,是非常重要的一种人工神经网络学习方法,常被用来训练前馈型多层感知器神经网络. 一.BP学习原理 1.前馈 ...

  2. java设计模式之工厂方法探究

    简单工厂 + 工厂方法 + 抽象工厂       看了十几篇博客,每篇基本上都能有个自己的解释,我汇总这些内容,重新梳理整理了一番,以形成自己的理解.       简单工厂模式其实不算23种设计模式之 ...

  3. dynamoDb 使用

    如果写入时候结构体为: type Item struct {  DeviceId string `dynamo:"deviceid"` Play int `dynamo:" ...

  4. 【原创】Android selector选择器无效或无法正常显示的一点研究

    想将LinearLayout作为一个按钮,加上一个动态背景,按下的时候,背景变色,这个理所当然应该使用selector背景选择器来做: <LinearLayout android:id=&quo ...

  5. Win8电脑蓝屏并提示dpc_watchdog_violation

    用尽系统自带的工具均无法恢复,F8能进系统.后来使用如下方法解决了 这种错误情况的发生可能是由于 iastor.sys 驱动没有完全兼容 Windows 8系统所造成的. 微软正在研究一种可行方案,来 ...

  6. Python基础-字符编码与转码

    ***了解计算机的底层原理*** Python全栈开发之Python基础-字符编码与转码 需知: 1.在python2默认编码是ASCII, python3里默认是utf-8 2.unicode 分为 ...

  7. maven编译报错 -source 1.5 中不支持 lambda 表达式

    在用maven编译项目是由于项目中用了jdk 1.8, 编译是报错  -source 1.5 中不支持 lambda 表达式,Google找到这篇解决方案,记录一下: 编译时报如下错误: [ERROR ...

  8. Hessian怎样实现远程调用

    1.Spring中除了提供HTTP调用器方式的远程调用,还对第三方的远程调用实现提供了支持,其中提供了对Hessian的支持. Hessian是由Caocho公司发布的一个轻量级的二进制协议远程调用实 ...

  9. rosetta2014/2015安装时出现INCLUDE(keyerror)错误，解决。

    错误: KeyError: 'INCLUDE' 使编译出错 解决方法: [usrname@host source]$ vim tools/build/site.settings 注释# "i ...

  10. NOI 1.5 41:数字统计

    描述 请统计某个给定范围[L, R]的所有整数中,数字2出现的次数. 比如给定范围[2, 22],数字2在数2中出现了1次,在数12中出现1次,在数20中出现1次,在数21中出现1次,在数22中出现2 ...