使用原生JS，实现鼠标点击爱心效果！！！

2022-04-21 13:39:57

使用原生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>

今天的分享就结束辽~，快打开你的编译器实现吧！！！

使用原生JS，实现鼠标点击爱心效果！！！

码农公寓