一个好玩的东西：页面点击鼠标左键显示浮动文字

首先看一下效果，如图

 

 

这是我的另一篇博客，红框圈出来的东西是鼠标连续点了好几下显示的，下面直接上代码（因为我也是复制别人的代码。。）

var content_index = Math.ceil(Math.random()*(json.page.length - 1));
    var content = json.page[content_index].content;
    console.log(content);


    jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤加油❤","❤努力❤");
        var $i = $("<span></span>").text(json.page[content_index].content);
        content_index = Math.ceil(Math.random()*(json.page.length - 1));
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });

代码非常简单，只有这么几行

下面简单讲解一下

    $("body").click：页面点击事件，该事件优先于任何click事件

    $i 动态创建一个span，其value是从接口接收过来的

    $i.css 设置了$i的字体、颜色、初始位置（根据鼠标位置）

imate 自定义动画效果、时间、回调函数，其效果就是展示span元素 -> y坐标逐渐向上平移180 -> 透明度逐渐过渡为0 -> 设置动画效果时间为1500ms -> 执行完毕后销毁span元素


其他说明：
   span内的数据来自于接口
   博客园为https协议，其网站下的任何链接必须为https才能引入
   我使用的是“彩虹屁接口”，接口地址来源于 彩虹屁生成器 (这个网站的作者非常厉害，建议前往浏览)