使用原生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>
今天的分享就結束遼~，快打開你的編譯器實現吧！！！