使用原生JS，实现鼠标点击爱心效果 ！！！
【摘要】 使用原生JS，实现鼠标点击爱心效果 ！！！ 引言：在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果，对于用户而言，这样的体验是很极致的。其实实现起来也很简单，下面一起来学习一下吧。文末附上完整代码，可以复制关键部分直接使用到自己的页面上 实现效果这样的效果==很常用==，在很多网页博客中都有使用 实现思路首先我们需要获取到当前鼠标点击的位置需要在当前位置生成一个标签需要给标签添加...
使用原生JS，实现鼠标点击爱心效果 ！！！
引言：
在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果，对于用户而言，这样的体验是很极致的。其实实现起来也很简单，下面一起来学习一下吧。文末附上完整代码，可以复制关键部分直接使用到自己的页面上
实现效果
这样的效果==很常用==，在很多网页博客中都有使用
实现思路
- 首先我们需要获取到当前鼠标点击的位置
- 需要在当前位置生成一个标签
- 需要给标签添加随机的自定义内容
- 随机的文本颜色
- 添加文本的淡出效果
- 清除淡出的标签
实现过程
下面的代码为了分开解释进行了拆分，完整代码在文末
1. 生成随机文本
let content = ["❤去活出你自己。❤", "❤《日不落》❤", "❤《一格格》❤", "❤《森林巴士》❤", "❤《爱就一个字》❤",
"❤《星辰大海》❤", "❤《千千万万》❤", "❤《我在等》❤", "❤《如一》❤", "❤《收敛》❤", "❤《间距》❤", "❤《早点早点》❤",
"❤《阿拉斯加海湾》❤", "❤《Peace&Love》❤", "❤《灰色》❤", "❤《带你回家》❤", "❤《等我回家》❤", "❤《0919》❤",
"❤《我很好》❤", "❤《会不会》❤", "❤《经济舱》❤", "❤《我走后》❤", "❤《不删》❤", "❤《Girls》❤",
"❤《Let Her Go》❤", "❤《关于你的梦》❤", "❤《慢慢》❤", "❤《下雨天》❤", "❤《翅膀》❤", "❤《靠近一点》❤",
"❤《翅膀》❤", "❤《This Is Love》❤", "❤《重来》❤", "❤《晴天》❤", "❤《空白格》❤", "❤《爱你3000》❤",
"❤《下落不明》❤", "❤《我要》❤", "❤《晚星》❤", "❤《你，好不好？》❤", "❤《50 Feet》❤", "❤《COCO》❤",
"❤《NUMB》❤", "❤《重演》❤", "❤《所念皆星河》❤"
] //自定义内容的数组
let randContent = Math.ceil(Math.random() * content.length);
首先需要自己定义一个数组，存放的内容就是鼠标点击时出现的内容，我这里用的是我自己喜欢的音乐（一个个打的，真的辛苦），然后通过随机获取一个数组索引，来实现随机文本。
2. 随机生成一个颜色
Text.prototype.getRandom = function() {
let allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f'; //16进制颜色
let allTypeArr = allType.split(','); //通过','分割为数组
let color = '#';
for (var i = 0; i < 6; i++) {
//随机生成一个0-16的数
var random = parseInt(Math.random() * allTypeArr.length);
color += allTypeArr[random];
}
return color; //返回随机生成的颜色
}
这个在前面写过的博客中也有用到，这次是直接复制过来的，通过随机获取0-16中的值，来实现一个16进制的颜色，这里我们要知道像#000fff这样表示的颜色，其实是==6个16进制数==组成的！
3. 文本上升效果
let i = 0
setInterval(() => {
_this.style.top = this.y - 20 - i + 'px'
i++
}, 10);
由于原生js中直接操作动画帧的样式比较复杂，所以采用定时器实现相同的功能，将标签的top值逐渐减小，这样标签就会实现上升的效果
4. 文字逐渐变淡效果
@keyframes remove {
100% {
opacity: 0;
}
}
逐渐变淡的效果是通过css3动画来实现的很简单，动画是通过js来给元素绑定的
5. 清除标签
Text.prototype.out = function (_this) {
_this.remove()
}
setTimeout(function () {
text.out(span)
}, 1900)
由于动画时长是两秒钟，这里采用倒计时，在1.9秒左右将标签删除~
6. 鼠标点击实例化标签，并在点击位置生成
body.addEventListener('click', function (e) {
let x = e.pageX;
let y = e.pageY; //当前坐标
let randContent = Math.ceil(Math.random() * content.length);//获取随机数
let text = new Text(x, y, randContent);//实例化
let span = document.createElement('span')//新建标签
span.style.color = text.getRandom();//添加随机颜色
text.create(span);//添加文本内容
setTimeout(function () {
text.out(span)//清除标签
}, 1900)
})
这里通过实例化的方式来给文本标签添加样式和方法，将文本标签显示在页面上
完整代码
一下就是完整代码，可以更改数组中的内容来实现自己的效果
<!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>点击出现自定义文字</title>
<style>
body {
height: 100vh;
background-color: black;
}
.text {
position: absolute;
z-index: 9999999;
font-weight: bold;
user-select: none;
}
@keyframes remove {
100% {
opacity: 0;
}
}
</style>
</head>
<body>
</body>
<script>
window.addEventListener('load', function () {
let body = document.body;
let content = ["❤去活出你自己。❤", "❤《日不落》❤", "❤《一格格》❤", "❤《森林巴士》❤", "❤《爱就一个字》❤",
"❤《星辰大海》❤", "❤《千千万万》❤", "❤《我在等》❤", "❤《如一》❤", "❤《收敛》❤", "❤《间距》❤", "❤《早点早点》❤",
"❤《阿拉斯加海湾》❤", "❤《Peace&Love》❤", "❤《灰色》❤", "❤《带你回家》❤", "❤《等我回家》❤", "❤《0919》❤",
"❤《我很好》❤", "❤《会不会》❤", "❤《经济舱》❤", "❤《我走后》❤", "❤《不删》❤", "❤《Girls》❤",
"❤《Let Her Go》❤", "❤《关于你的梦》❤", "❤《慢慢》❤", "❤《下雨天》❤", "❤《翅膀》❤", "❤《靠近一点》❤",
"❤《翅膀》❤", "❤《This Is Love》❤", "❤《重来》❤", "❤《晴天》❤", "❤《空白格》❤", "❤《爱你3000》❤",
"❤《下落不明》❤", "❤《我要》❤", "❤《晚星》❤", "❤《你，好不好？》❤", "❤《50 Feet》❤", "❤《COCO》❤",
"❤《NUMB》❤", "❤《重演》❤", "❤《所念皆星河》❤"
] //自定义内容的数组
body.addEventListener('click', function (e) {
let x = e.pageX;
let y = e.pageY; //当前坐标
let randContent = Math.ceil(Math.random() * content.length);
let text = new Text(x, y, randContent);
let span = document.createElement('span')
span.style.color = text.getRandom();
text.create(span);
setTimeout(function () {
text.out(span)
}, 1900)
})
function Text(x, y, rand) {
this.x = x;
this.y = y;
this.rand = rand;
}
Text.prototype.create = function (_this) {
let body = document.body;
_this.innerHTML = content[this.rand - 1];
_this.className = 'text'
_this.style.top = this.y - 20 + 'px'
_this.style.left = this.x - 50 + 'px'
_this.style.animation = 'remove 2s'
body.appendChild(_this);
let i = 0
setInterval(() => {
_this.style.top = this.y - 20 - i + 'px'
i++
}, 10);
}
Text.prototype.out = function (_this) {
_this.remove()
}
//设置随机颜色
Text.prototype.getRandom = function () {
let allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f'; //16进制颜色
let allTypeArr = allType.split(','); //通过','分割为数组
let color = '#';
for (var i = 0; i < 6; i++) {
//随机生成一个0-16的数
var random = parseInt(Math.random() * allTypeArr.length);
color += allTypeArr[random];
}
return color; //返回随机生成的颜色
}
})
</script>
</html>
今天的分享就结束辽~，快打开你的编译器实现吧！！！
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）