冒泡信息抢购特效

来源:赵克立博客 分类: 前端开发 标签:--发布时间:2017-05-09 18:43:14最后更新:2017-05-09 21:13:57浏览:1218
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2017-05-09 21:13:57
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

先看效果

GIF.gif

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>冒泡信息抢购特效</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="描述" />
</head>
<body>
    <style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        font: 12px/1.7 'microsoft yahei';
    }
    .maopao {
        opacity: 0;
        background: rgba(0, 0, 0, .5);
        color: #fff;
        position: fixed;
        left: -200px;
        top: 50px;
        width: 200px;
        height: 30px;
        border-radius: 20px;
        padding: 5px 10px;
    }
    .maopao img,
    .maopao .ms,
    .maopao .sj {
        display: block;
        float: left;
    }
    .maopao img {
        max-height: 100%;
        border-radius: 50%;
    }
    .maopao .ms {
        width: 100px;
        margin-left: 10px;
        height: 30px;
        line-height: 30px;
    }
    .maopao .sj {
        height: 30px;
        line-height: 30px;
        float: right;
        margin-right: 10px;
    }
    </style>
    <div id="maopao" class="maopao">
        <img id="mp-img"  src="https://s3.cn-north-1.amazonaws.com.cn/xianliaom/room_avatars/13672165-cbf8-4c9c-8229-b01b67318cd3-thumbnail.jpg" alt="">
        <span id="mp-ms" class="ms">张三下啦一个订单</span>
        <span id="mp-sj" class="sj">4秒前</span>
    </div>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    /**
     * 生成指定范围内的随机数
     * @param  {[type]} start 开始
     * @param  {[type]} end   结束
     * @return {[type]}       int
     */
    var suijishu = function(start, end) {
        return Math.floor(Math.random() * (end - start + 1) + start);
    };
    function showmsg() {
        var data = namelist[suijishu(0, namelist.length - 1)];
        $('#mp-img').prop({
            src: data.w_headimg
        });
        $('#mp-ms').html(data.w_name + '下啦1个订单');
        $('#mp-sj').html(suijishu(2, 30) + '秒前');
        $('#maopao').animate({
            left: 20 + 'px',
            opacity: 1
        }, 1000, function() {
            setTimeout(function() {
                $('#maopao').css({
                    opacity: 0,
                    left: '-' + 200 + 'px'
                });
                setTimeout(function() {
                    showmsg();
                }, suijishu(2, 4));
            }, 2000);
        });
    }
    $(function() {
        showmsg();
    });
    var namelist = [{
        "w_name": "\u534e",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/3CC6C03786C6C693F364B395F327197F\/100"
    }, {
        "w_name": "\u8d75 \u5dcd",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/D091A297D0A3D3619C6D828C681F305F\/100"
    }, {
        "w_name": "\u5c0f\u5988\u54aa?\u4e91\u5728\u6307\u5c16",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/685AA36438DDD7E0EB55D0C18097CA1C\/100"
    }, {
        "w_name": "\u84dd\u84dd",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/DDA36344FDAF8DF2BFDD8F3DAEDE5B74\/100"
    }, {
        "w_name": "\u6e29\u5dde\u5144\u5f1f\u5178\u5f53_\uff08\u554a\u677e\uff09",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/E2348DFF85AE861D17451BDDC0432809\/100"
    }, {
        "w_name": "\u7b80\u5355",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/1656EDDA7E648DD32E862460EE92E1C5\/100"
    }, {
        "w_name": "\u603b\u6709\u5201\u6c11\u60f3\u9634\u6715\u3063",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/29DBC6217FA0B06ABC25C70FE260221F\/100"
    }, {
        "w_name": "\u6bd5\u6c5f\u660e",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/72763DE05338B738EEA4D9FBEFD8DBBF\/100"
    }, {
        "w_name": "\u4e94\u5e73\u65b9",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/9CFD84D74ABF5141EA8F6B73BD06C3E1\/100"
    }, {
        "w_name": "\u838e\u838e",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/BA6DA5237D4175DDC750553561F219B7\/100"
    }, {
        "w_name": "Jkj.",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/772D04D9EB8E70A961A1D5CABBCF293A\/100"
    }, {
        "w_name": "\u5362\u6da6\u9704",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/25217BFE51A1B8A16160A9F43837A86F\/100"
    }, {
        "w_name": "\u541b\u541b",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/198FD85BC7EFBCCB5C73AE4FEB633560\/100"
    }, {
        "w_name": "\u5b59\u5c0f\u5175",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/02305E433C97C724931A79F8FB04FE50\/100"
    }, {
        "w_name": "\uD83C\uDF3A\u3001dacy",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/48BE3B50C3E9847242626FF9A07C3317\/100"
    }, {
        "w_name": "Mr. Xue ?",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/5283BB3808A16D227AC03DC4374F77C6\/100"
    }, {
        "w_name": "\u5b5f\u82d7\u82d7",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/BE2BFD6D743F815AC7A8FA974E40D4FC\/100"
    }, {
        "w_name": "\u51e1\u5c14\u8d5b\u5bab\u7684^_^\u7cef\u7c73",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/C54D6E68485F84A86822CF7E473A93EC\/100"
    }, {
        "w_name": "\u798f\u661f\uff0c",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/2316567F52712C775048DB02BF5C261C\/100"
    }, {
        "w_name": "\u8881\u82b3",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/D1A596E47C0AA279BA8BB9BAAC02CC44\/100"
    }, {
        "w_name": "\u5de6\u53f3",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/189955F05F482DE956480DB66B07E4DC\/100"
    }, {
        "w_name": "\u6797\u6770\u68df_",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/5CD9B7ACD34332B8DA145BE3DE4C44FB\/100"
    }, {
        "w_name": " \uD83D\uDC8B",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/B7CDFAA5FD54A0FD2904A30B6A29D660\/100"
    }, {
        "w_name": "\u4e9a\u91cc\u58eb\u7f3a\u5fb7",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/D3875B44A8DB4ABE135059C7362B4094\/100"
    }, {
        "w_name": "\u5218\u83b9",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/D6AEE11866CCEC092B82C532218F6B20\/100"
    }, {
        "w_name": "\u3002",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/9ADBAEBE292B4FA0737F9DB142336157\/100"
    }, {
        "w_name": "\u4e0d\u5728\u4e4e",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/71E4837B7B1F0A12D5F8D90234DDB95C\/100"
    }, {
        "w_name": "IF YOU",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/E0FB2E95D84068B944789BF6569B3A7F\/100"
    }, {
        "w_name": "\u66f9\u96ea\u68a6",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/A6F3CA4B97E59BB9AE5495984ACF3090\/100"
    }, {
        "w_name": "\u4e00",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/0DE079B903E44F96AB9BAD85D706A61F\/100"
    }, {
        "w_name": "Zhao. Devil \u03a8",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/94B9F8421330A7B82F019492C822BF42\/100"
    }, {
        "w_name": "\u52aa\u529b\u594b\u6597",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/D56EE4D71422A112CDA6B7B44D48B044\/100"
    }, {
        "w_name": "\u7528\u6bdb\u4e3b\u5e2d\u7684\u6c14\u8d28\u538b\u5012\u4e00\u5207\u2121",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/FF4E560E4F11C2EBAAFFFC4625CD3122\/100"
    }, {
        "w_name": "\u8461\u4e86\u4e2a\u8404",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/F6213667E85E205FF363B3947D218D38\/100"
    }, {
        "w_name": "\u5c0f\u5377\u5b50",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/D42066DE19EBB82D30A351185956DB41\/100"
    }, {
        "w_name": "\u51b0\u662f\u7761\u7740\u7684\u6c34",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/5DA508A1616E732B0EB92A1ADAF28456\/100"
    }, {
        "w_name": "\u5927\u6735\u4e91",
        "w_headimg": "http:\/\/q.qlogo.cn\/qqapp\/1104718115\/9DE656A9B0C0384FCCF7D02BD02CFCB5\/100"
    }];
    </script>
</body>
</html>

微信号:kelicom QQ群:215861553 紧急求助须知
Win32/PHP/JS/Android/Python