<!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. iOS - + initialize 与 +load

    一.+ initialize 方法和+load 调用时机 首先说一下 + initialize 方法:苹果官方对这个方法有这样的一段描述:这个方法会在 第一次初始化这个类之前 被调用,我们用它来初始化 ...

  2. Oracle知识分类之常见规范

    命名规范 变量规范 1.入参,统一以I_前缀开头,且不能省略IN 2.出参,统一以O_前缀开头 3.局部变量,统一以V_前缀开头 4.常量,统一以CN_前缀开头 5.游标,统一以CUR_前缀开头 组成 ...

  3. maven配置

    java 环境变理 http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html maven环境变理 http://www.cnblog ...

  4. sublime 配置jade高亮显示

    1.下载 Package Control.sublime-package 文件放入Packages文件目录下 2.control + shift + p   输入install package 3. ...

  5. Java线程：线程的同步-同步方法

    Java线程:线程的同步-同步方法   线程的同步是保证多线程安全访问竞争资源的一种手段. 线程的同步是Java多线程编程的难点,往往开发者搞不清楚什么是竞争资源.什么时候需要考虑同步,怎么同步等等问 ...

  6. ssl双向认证和单向认证原理

    有朋友在搞一个项目,周末有聊到一些安全性的东西,很自然会想起https,但https究竟如何实施,其原理又是什么? 基于ssl,一般的应用都是单向认证,如果应用场景要求对客户来源做验证也可以实现成双向 ...

  7. jquery easyui tree的全选与反选

    //全选反选 //参数:selected:传入this,表示当前点击的组件 //treeMenu:要操作的tree的id:如:id="userTree" function tree ...

  8. java web filter 学习（2）

    本文主要对filter的基本使用进行了讲解,其中涉及到了 filter是什么 一个filter处理一个jsp 多个filter处理一个jsp filter是什么 Filter 是java下的一种过滤器 ...

  9. LeetCode Paint House

    原题链接在这里:https://leetcode.com/problems/paint-house/ 题目: There are a row of n houses, each house can b ...

  10. web app上传图片

    很就很久以前,web app上传图片需要通过cordova插件,那时候好像还叫phonegap. 后来一个html标签就可以了 <input type="file" clas ...