在很多网站中，我们可以看到随着鼠标的移动，会生成许多的特效，今天就来分享一下如何利用 JavaScript 来制作这种特效
# 思路流程
- 利用 JavaScript 动态生成
div - 对该
div进行样式设置 - 设定该元素对随机颜色
- 设定该元素生成一段时间后的自动消失消失效果
# 1.利用 JavaScript 动态生成div，并对该div进行样式设置
使用window.onmousemove ，当用户移动鼠标触发function (event)事件;
在该事件中document.createElement("div")来生成一个新的div;
使用document.body.appendChild(newEle)来添加一个元素；
window.onmousemove = function(event) {
var newEle = document.createElement("div");
document.body.appendChild(newEle);
};
1
2
3
4
5
2
3
4
5
# 2.对该div进行样式设置
首先利用``对该元素的布局以及大小进行设置
<style type="text/css">
div {
position: absolute;
display: block;
font-size: xx-large;
}
</style>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
然后设置其跟尾字符以及相对光标可视区域的 X，Y 坐标（窗口坐标），px 为增加数值的单位
newEle.innerHTML = "*"; //设置跟尾字符
newEle.style.left = event.clientX + 5 + "px";
newEle.style.top = event.clientY + 5 + "px";
1
2
3
4
5
2
3
4
5
# 3.设定该元素的随机颜色产生
利用Math.floor以及Math.random()函数随机生成rgb()中颜色的值达到随机生成效果
var coor =
"rgb(" +
Math.floor(Math.random() * 256) +
"," +
Math.floor(Math.random() * 256) +
"," +
Math.floor(Math.random() * 256) +
")";
newEle.style.color = coor;
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 4.设定该元素生成一段时间后的自动消失消失效果
//设置逐渐消失的秒数，数字是几就是几秒消失
var opacity = parseFloat(1);
//透明度为0后移除该元素
var setInterval = window.setInterval(function() {
if (opacity <= 0) {
window.clearInterval(setInterval);
newEle.remove();
}
//让元素逐渐半透明直至消失
else {
opacity = opacity - 0.1;
newEle.style.opacity = opacity;
}
}, 100);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 将该段代码合并运行，并查看效果
<style type="text/css">
div {
position: absolute;
display: block;
font-size: xx-large;
}
</style>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script type="text/javascript">
window.onmousemove = function (event) {
var newEle = document.createElement("div");
document.body.appendChild(newEle)
newEle.style.left = (event.clientX + 5);
newEle.style.top = (event.clientY + 5);
newEle.innerHTML = "*";
var coor = "rgb(" + Math.floor(Math.random() * 256)
+"," + Math.floor(Math.random() * 256) + ","
+ Math.floor(Math.random() * 256) + ")"
newEle.style.color = coor;
var opacity = parseFloat(1);
var setInterval = window.setInterval(
function () {
if (opacity <= 0) {
window.clearInterval(setInterval);
newEle.remove();
} else {
opacity = (opacity - 0.1);
newEle.style.opacity = opacity;
}
}, 100)
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
