思路:让鼠标移动的同时后面创建小的div,随着鼠标的移动而移动,div的个数是有限的
方案1;让鼠标移动时创建新的div,限制总个数,后面超出的个数就删除。
方案2:循环引用。让随后一个div的位置移动到当前鼠标的位置
实现思路:用数组存放div。让最后一个和第一个div交换,其它的数组下标向后移动一个下标。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var bod = document.body;
var num = 20;// 控制显示的div的个数
var count = 0;
var arr =[];
document.onmousemove = function(event){
if(count<num){
for(;count<num;count++){
var subDiv = document.createElement("div");
subDiv.style.width = "10px";
subDiv.style.height = "10px";
subDiv.style.backgroundColor = "red";
subDiv.style.top = event.clientY+"px";
subDiv.style.left = event.clientX+"px";
subDiv.style.position = "absolute";
subDiv.id = count.toString();
bod.appendChild(subDiv);
arr[count] = subDiv;
}
}else{
var temp = arr[num-1];
for(var i=num-1;i>0;i--){
arr[i]=arr[i-1];
}
arr[0]=temp;
arr[0].style.top = event.clientY+"px";
arr[0].style.left = event.clientX+"px";
}
}
</script>
</body>
</html>