鼠标点击效果
梓泓 2020-08-22 vuepress
# 效果
鼠标点击时出现文字动画
# 配置
首先我们在.vuepress\public\js文件夹下创建MouseClickEffect.js文件,填入以下代码
var a_idx = 0;
function getRandom(max, min) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function css(el,styles) {
for (style in styles) {
el.style.setProperty(style, styles[style]);
}
};
window.onload = function(){
document.querySelector("body").onclick = (e)=>{
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
var span = document.createElement("span");
span.innerText = '❤' + a[a_idx] + '❤';
a_idx = (a_idx + 1) % a.length;
var x = e.clientX,
y = e.clientY;
css(span,{
"z-index": 999999,
"top": y - 20 + "px",
"left": x + "px",
"position": "fixed",
"font-weight": "bold",
"color": `rgb(${getRandom(255,0)},${getRandom(255,0)},${getRandom(255,0)})`,
"user-select": "none",
"cursor": "default",
"opacity": 1,
"transition": "all 1s"
});
document.querySelector("body").appendChild(span);
setTimeout(()=>{
css(span,{
"opacity": 0,
"top": y - 100 + "px",
})
},0)
setTimeout(()=>{
span.parentNode.removeChild(span)
},1500)
};
};
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
然后在主题配置文件config.js下的head引入MouseClickEffect.js
head: [
// 引入鼠标点击脚本
["script", {
"language": "javascript",
"type": "text/javascript",
"src": "/js/MouseClickEffect.js"
}]
],
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
这样鼠标点击效果就配置完成了