冒泡信息抢购特效
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2017-05-09 21:13:57
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
先看效果
<!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>