<!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. python基础3

    一.文件操作:打开文件:f = open("db", "r") #只读f = open("db", "w") #只写,注 ...

  2. 修改XCode的Product的输出目录（有时不生效需看）

    通常在情一般都不建议使用绝对路径,因为写死之后,换环境,换平台,又要重新修改路径,因此常常使用相对路径,哪么相对路径通常使用的就是环境变量了. 在Mac 中,xcode 中build settings ...

  3. GC

    垃圾回收机制的优点:释放无用的对象所占用的空间.方式:自动回收.手动回收.使用System.gc实际上是调用Runtime.getRuntime().gc()

  4. FTPClient.listFiles()不能获取文件

    今天使用ftp获取另一台服务器上的文件,发现不管切换到哪个目录,获取什么文件,调用FTPClient.listFiles()方法时返回的始终为空,但是代码又运行正常没有异常抛出. 网上查了下,发现有很 ...

  5. OC中的那些String

    /--------操作字符串--NSString(静态字符串)--------------------- NSString * a = @"a+b+c+a+b+d"; NSArra ...

  6. Android JavaMail

    一.简介 JavaMail API提供了一种与平台无关和协议独立的框架来构建邮件和消息应用程序. JavaMail API提供了一组抽象类定义构成一个邮件系统的对象.它是阅读,撰写和发送电子信息的可选 ...

  7. 奥威软件Speed-BI荣获2016年度中国大数据最佳云平台奖

    (原文转自:http://www.powerbi.com.cn/page110?article_id=210) 2016年12月16日,“科技原力觉醒,引领创新巅峰”—2016创新影响力年会暨国家产业 ...

  8. 继续Django

    环境准备 1.    创建一个Django后,Django的目录: │ manage.py │ ├─Django_s1 │ settings.py │ urls.py │ wsgi.py │ __in ...

  9. 转载：谈谈Unicode编码，简要解释UCS、UTF、BMP、BOM等名词

    转载: 谈谈Unicode编码,简要解释UCS.UTF.BMP.BOM等名词 这是一篇程序员写给程序员的趣味读物.所谓趣味是指可以比较轻松地了解一些原来不清楚的概念,增进知识,类似于打RPG游戏的升级 ...

  10. poj 2376 Cleaning Shifts

    http://poj.org/problem?id=2376 Cleaning Shifts Time Limit: 1000MS   Memory Limit: 65536K Total Submi ...