点击页面出现富强民主，文明和谐之类的文字

一、文字预览如下图

二、话不多说，直接上代码

1、 复制下面CSS代码粘贴到页面任意位置

<style>
.text-popup {
    animation: textPopup 1s;
    color: red;
    user-select: none;
    white-space: nowrap;
    position: absolute;
    z-index: 99;
}
@keyframes textPopup {
    0%, 100% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    100% {
        transform: translateY(-50px);    
    }
}
</style>

2. 复制下面的JS代码到页面任意位置

<script>
var fnTextPopup = function (arr, options) {
    // arr参数是必须的
    if (!arr || !arr.length) {
        return;    
    }
    // 主逻辑
    var index = 0;
    document.documentElement.addEventListener('click', function (event) {
        var x = event.pageX, y = event.pageY;
        var eleText = document.createElement('span');
        eleText.className = 'text-popup';
        this.appendChild(eleText);
        if (arr[index]) {
            eleText.innerHTML = arr[index];
        } else {
            index = 0;
            eleText.innerHTML = arr[0];
        }
        // 动画结束后删除自己
        eleText.addEventListener('animationend', function () {
            eleText.parentNode.removeChild(eleText);
        });
        // 位置
        eleText.style.left = (x - eleText.clientWidth / 2) + 'px';
        eleText.style.top = (y - eleText.clientHeight) + 'px';
        // index递增
        index++;
    });    
};

fnTextPopup(['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']);
</script>

然后现在就有效果了！
当然，你也可以把CSS和JS代码片段分别写到自己的CSS文件和JS文件中。

我是vue项目，直接写在了 App.vue文件中，jquery的库文件直接在index.html文件中引入的，如果你的也是vue项目可以直接和我接下来的截图写一样的。


在index.html中引入jquery，你也可以自己通过npm的方式下载jquery也行 (只是我自己通过npm方式下载jquery一直出bug);

三、点击页面时出现文字动画效果实现原理

DOM时间的event对象中有个pageX和pageY可以获取到点击事件发生时候事件发生源相对于页面左上角的水平距离和垂直距离。对于鼠标点击事件，则对应鼠标相对于页面左上角的距离，因此，我们只要把文字内容定位到这个点击位置偏上一点位置就可以了。

然后，配合CSS3 animation，写一个往上淡出效果就可以了。

当文字元素插入到页面的时候，动画会自动执行。

为了防止文字元素不断创建，占用不必要的资源，我们可以借助animationend事件实现动画结束的时候自动删除创建的文字元素。

ele.addEventListener(‘animationend’, function () {
ele.parentNode.removeChild(ele);
});

四、语法和参数

语法如下：

fnTextPopup(arr);
其中，arr表示依次要显示的文字内容数组。

例如，我们希望点击页面显示的不是核心社会主义价值观，而是想为自己喜欢偶像加油，可以这样：

fnTextPopup([‘蔡徐坤我爱你’, ‘范丞丞你最棒’, ‘请pick杨超越’, ‘王菊加油’, ‘吴宣仪你最美’]);
如果想要修改tips文字的颜色，字体等样式效果，修改CSS代码中.text-popup类名对应的CSS属性即可！

五、结束语

如果想要加入IE8浏览器，可以按照上面实现逻辑，改成jQuery的语法，然后，动画可以使用jQuery的animate()方法，这里不展示。

另外，移动端没测试，如果没效果，试试document.documentElement改成document.body。

本文几乎没有深度，但是，有价值，一些代码刚入门的小朋友就需要这些东西，节约了别人的时间，帮助了别人实现功能，是件有价值的事情，因此，值得花时间记录下来。而且，以后，说不定自己也要用到这个效果，也可以节约自己的时间，一举两得。

写作这事吧，也随缘，别总想着帮到所有人，没必要那么功利，只要不误人，有价值，我觉得都是值得鼓励的。

🙂