哇塞! 我可以使用jQuery实现点击弹出彩色文字动画效果 【附完整代码】

🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起进步！😄
🏅 如果文章对你有帮助的话，欢迎评论 💬点赞👍🏻 收藏 📂加关注

首先引入jQuery

<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>

文字效果代码如下

<!-- 点击出弹出文字效果 -->
<script type="text/javascript">
    $(document).click(function(e){
   
   
        var list = [
            "❤HTML❤", "❤CSS❤", "❤Javascript❤", "❤PHP❤", "❤MySQL❤", "❤Vue.js❤", "❤算法❤", "❤数据结构❤",
            "❤程序员❤", "❤敬业❤", "❤诚信❤", "❤友善❤"
        ];
        textUp( e, 2000, list, 200 )
    })
    function textUp( e, time, arr, heightUp ){
   
   
        var lists = Math.floor(Math.random() * arr.length);
        var colors = '#'+Math.floor(Math.random()*0xffffff).toString(16);
        var $i = $('<span />').text( arr[lists] );
        var xx = e.pageX || e.clientX + document.body.scroolLeft;
        var yy = e.pageY || e.clientY + document.body.scrollTop;

        $('body').append($i);
        $i.css({
   
   
            top: yy,
            left: xx,
            color: colors,
            transform: 'translate(-50%, -50%)',
            display: 'block',
            position: 'absolute',
            zIndex: 999999999999
        })
        $i.animate({
   
   
            top: yy - ( heightUp ? heightUp : 200 ),
            opacity: 0
        }, time, function(){
   
   
            $i.remove();
        })
    }
</script>

效果如下