小球随鼠标移动

最新推荐文章于 2021-06-07 18:45:18 发布

VVVGavin

最新推荐文章于 2021-06-07 18:45:18 发布

阅读量683

点赞数 1

分类专栏：鼠标事件文章标签：鼠标移动 javascript

本文链接：https://blog.csdn.net/WgGaopeng/article/details/75911600

版权

鼠标事件专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一种方式：利用js产生节点实现

<!DOCTYPE html>

<html>

<head>

<title>小球随鼠标移动</title>

</head>

<body>

</body>

//创建一个数字的随机函数

function randNum(m, n) {

return Math.floor(Math.random() * (n - m) + m);

};

//创建一个随机颜色的函数

function randColor() {

var r = randNum(0, 255);

var g = randNum(0, 255);

var b = randNum(0, 255);

return "rgb(" + r + "," + g + "," + b + ")";

};

var arrX = []; //存储鼠标距可视窗口左边的距离

var arrY = []; //存储鼠标距可视窗口顶部的距离

var divSum = []; //存储创建的节点

var index = 0; //存储小球的编号

var wrap = document.getElementById("wrap");

function creatdiv() { //创建一个新的节点

var event1 = event || e;

arrX.push(event1.clientX); //存位置

arrY.push(event1.clientY);

var divs = document.createElement("div");

divs.style.position = "absolute";

divs.style.width = "40px";

divs.style.height = "40px";

divs.style.borderRadius = "50%";

divs.style.backgroundColor = randColor();

divs.style.left = event1.clientX - 20 + "px";

divs.style.top = event1.clientY - 20 + "px";

divs.style.textAlign="center";

divs.style.lineHeight="40px";

divs.innerHTML = index; //为创建的div节点添加内容

wrap.appendChild(divs); //添加divs节点

divSum.push(divs); //存储创建的div节点

// console.log(divSum[4]); //调试最后一个节点

}

document.onmousemove = function(e) {

index++;

if(index==81){

index = 0; //节点内容清零

}

creatdiv();

if (divSum.length >= 81) {

// debugger; //调试程序用的命令

console.log(divSum[0]);

wrap.removeChild(divSum[0]);

for (var i = 0; i < 80; i++) {

arrX[i] = arrX[i + 1]; //交换位置坐标X

arrY[i] = arrY[i + 1]; //交换位置坐标Y

divSum[i] = divSum[i + 1]; //交换节点位置

}

divSum.pop(); //删除创建的最后一个节点

}

// console.log(arrX);

// console.log(arrY);

}

</script>

</html>

第二种方式：在html中写好结构，js中处理逻辑交互

<!DOCTYPE html>

<html>

<head>

.content{

width: 30px;

height: 30px;

background-color: red;

border-radius: 50%;

font-size: 17px;

text-align: center;

line-height: 30px;

position: absolute;

}

</style>

</head>

<body>

</body>

function randomNum (min,max) {

return Math.floor(Math.random() * (max - min + 1) + min);

}

//设置颜色

var divs = document.getElementsByClassName('content');

for (var i = 0;i < divs.length;i++) {

var r = randomNum(0,255);

var g = randomNum(0,255);

var b = randomNum(0,255);

divs[i].style.backgroundColor = 'rgb('

+ r + ',' + g + ',' + b + ')';

}

//设置多个球div跟随着鼠标移动

document.onmousemove = function (e) {

//获取事件对象

var event = window.event || e;

//设置相邻div的位置为上一次鼠标移动的位置

for (var i = divs.length - 1; i > 0;i--) {

divs[i].style.top = divs[i - 1].style.top;

divs[i].style.left = divs[i - 1].style.left;

}

//设置最上面的div位置，跟随着鼠标位置移动

divs[0].style.top = event.clientY + 'px';

divs[0].style.left = event.clientX + 'px';

}

</script>

</html>