第一种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//随机数函数
function randomNum(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
}
//随机颜色
function randomColor(){
var red = randomNum(0, 255);
var green = randomNum(0, 255);
var blue = randomNum(0, 255);
return "rgb(" + red + "," + green + "," + blue + ")";
}
//定义数组 来存储创建的div标签对象
var divArray = [];
for(var i = 0; i < 50; i++){
var div = document.createElement("div");
div.style.backgroundColor = randomColor();
document.body.appendChild(div);
//注意 关键
divArray.push(div);
}
//--------------------
//给窗口添加鼠标移动事件 让标签跟着鼠标移动!!
window.onmousedown = function(){
window.onmousemove = function(){
/*
divArray[0].style.left = event.clientX + "px";
divArray[0].style.top = event.clientY + "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;
}
*/
divArray[49].style.left = event.clientX + "px";
divArray[49].style.top = event.clientY + "px";
for(var i = 1; i < divArray.length; i++){
divArray[i - 1].style.left = divArray[i].style.left;
divArray[i - 1].style.top = divArray[i].style.top;
}
}
}
</script>
第二种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
}
</style>
</head>
<body>
<div id="div0"></div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
</body>
</html>
<script type="text/javascript">
//随机数
function randomNum(min, max){
return Math.floor(Math.random() * (max - min + 1) + min);
}
//随机颜色
function randomColor(){
var red = randomNum(0, 255);
var green = randomNum(0, 255);
var blue = randomNum(0, 255);
return "rgb(" + red + "," + green + "," + blue + ")";
}
//上色
var divArray=document.getElementsByTagName("div");
for(i=0;i<divArray.length;i++){
divArray[i].style.position="absolute";
}
for(i=0;i<divArray.length;i++){
divArray[i].style.backgroundColor=randomColor();
}
//代码执行区域
var s=null;
document.onmousedown=function(){
s=setInterval(move,100);
document.onmousemove=function(){
div0.style.left=event.clientX-25+"px";
div0.style.top=event.clientY-25+"px";
}
}
var i=0;
function move(){
document.onmousemove=function(){
if(i==10){
i=0;
}else{
divArray[i].style.left=event.clientX-25+"px";
divArray[i].style.top=event.clientY-25+"px";
i++;
}
}
}
//鼠标弹起 取消移动
document.onmouseup=function(){
document.onmousemove=null;
clearInterval(s);
}
</script>