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

时间：2023-11-16 14:54:02

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

引言：

在很多时候我们都需要实现鼠标点击出现图案或者文字这样的效果，对于用户而言，这样的体验是很极致的。其实实现起来也很简单，下面一起来学习一下吧。文末附上完整代码，可以复制关键部分直接使用到自己的页面上

实现效果

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

这样的效果很常用，在很多网页博客中都有使用

实现思路

  1. 首先我们需要获取到当前鼠标点击的位置
  2. 需要在当前位置生成一个标签
  3. 需要给标签添加随机的自定义内容
  4. 随机的文本颜色
  5. 添加文本的淡出效果
  6. 清除淡出的标签

实现过程

下面的代码为了分开解释进行了拆分，完整代码在文末

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>

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

相关文章