<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标跟随一串效果</title>
<style type="text/css">
div{
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>