您的位置：首页 > Web前端 > JavaScript

JS实现跟随

2016-04-28 15:38 393 查看

思路：让鼠标移动的同时后面创建小的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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航