4月30日，（每日一练）Javascript案例，鼠标跟随炫彩特效
鼠标在页面移动的同时，生成炫彩小球移动，生成的位置跟随鼠标位置，并在一段时间后，小球消失，类似特效：具有鼠标高光提示位置功能的运用。
建议小伙伴们先自行尝试，
提示：绑定鼠标监听用client索取鼠标位置，动态生成小球（div border-radius = 50%）
利用定时器，按你喜欢的帧率（ms）更新小球的状态，颜色，显示程度！
本文重难点：
1、如何在生成小球的同时不造成内存的大量占用（仔细思考！在今后学习工作都很重要）
2、定时器的运用，以及update更新函数的书写
练习本文之前必会知识：构造函数以及new一个实例的写法及运用，dom的运用
现在给你15分钟时间尝试书写代码
---------分割线----------
时间到！
如果你成功写出大概特效，那么，恭喜你通过了今天的每日练习！
如果没有写出，也不要灰心，接下来看看我的解答。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background-color: black;
}
.ball {
position: absolute;
border-radius: 50%;
}
</style>
<body>
<script>
//创建小球类
function Ball(x, y) {
//x,y表示圆心
this.x = x;
this.y = y;
this.r = 20;
this.opacity = 1;
this.color = colorArr[parseInt(Math.random() * colorArr.length)];
// 这个小球的x增量和y的增量，使用do while语句，可以防止dX和dY都是零
do {
this.dX = parseInt(Math.random() * 20) - 10;
this.dY = parseInt(Math.random() * 20) - 10;
}
while (this.dX == 0 & this.dY == 0)
//初始化
this.init();
ballArr.push(this);
};
//初始化方法
Ball.prototype.init = function () {
//创建自己的dom
this.dom = document.createElement('div');
this.dom.className = 'ball';
this.dom.style.width = this.r * 2 + 'px';
this.dom.style.height = this.r * 2 + 'px';
this.dom.style.left = this.x - this.r + 'px';
this.dom.style.top = this.y - this.r + 'px';
this.dom.style.backgroundColor = this.color;
//孤儿节点需要上树
document.body.appendChild(this.dom);
};
//更新
Ball.prototype.update = function () {
//位置改变
this.x += this.dX;
this.y += this.dY;
//半径改变
this.r += 0.2;
//透明度改变
this.opacity -= 0.01;
this.dom.style.width = this.r * 2 + 'px';
this.dom.style.height = this.r * 2 + 'px';
this.dom.style.left = this.x - this.r + 'px';
this.dom.style.top = this.y - this.r + 'px';
this.dom.style.opacity = this.opacity;
//防止大量内存占用！小球需要检索并删除！
// 当透明度小于0的时候，就需要从数组中删除自己，DOM元素也要删掉自己
if (this.opacity < 0) {
// 从数组中删除自己
for (var i = 0; i < ballArr.length; i++) {
if (ballArr[i] == this) {
ballArr.splice(i, 1);
}
}
// 还要删除自己的dom
document.body.removeChild(this.dom);
}
}
// 把所有的小球实例都放到一个数组中
var ballArr = [];
// 初始颜色数组
var colorArr = ['#66CCCC', '#CCFF66', '#FF99CC', '#FF6666',
'#CC3399', '#FF6600'
];
// 定时器，负责更新所有的小球实例
setInterval(function () {
// 遍历数组，调用调用的update方法
for (var i = 0; i < ballArr.length; i++) {
ballArr[i].update();
}
}, 20);
// 鼠标指针的监听
document.onmousemove = function (e) {
// 得到鼠标指针的位置
var x = e.clientX;
var y = e.clientY;
new Ball(x, y);
};
</script>
</body>
</html>
本文转载自: https://blog.csdn.net/Wps1919/article/details/124514625
版权归原作者 胜利111 所有， 如有侵权，请联系我们删除。
版权归原作者 胜利111 所有， 如有侵权，请联系我们删除。