js实现抢购滚动列表,提高活动人气
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2017-01-13 15:10:11
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
效果图如下:需要下载animate.css这个css动画文件 http://tool.zhaokeli.com/animate.html
(function(a) { 'use strict'; var container = null; var _getData = function() { return '<div>' + Math.random() + '一个列表</div>' } var _maxNum = 6; var _init = function(opt) { container = $(opt.id); if ('function' === typeof opt.getData) { _getData = opt.getData; } for (var i = 0; i < _maxNum; i++) { container.prepend(_getData); container.children(':first').show(); } var _timeid = setInterval(function() { _scrAd(); }, 2000); }; var _scrAd = function() { if (container.children().length > (_maxNum - 1)) { container.children(':last').remove(); } container.prepend(_getData); var obj = container.children(':first'); var img = obj.find('img'); obj.slideDown('slow', function() { img.addClass('swing animated infinite'); setTimeout(function() { img.removeClass('swing animated infinite'); }, 1000); }); } a.hotList = _init; })(window)
完整示例代码
<!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="描述" /> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <link href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <style type="text/css"> #adcon{padding: 10px;} #adcon img{max-width: 50px;max-height: 50px;border-radius: 50%; float: left;} .aditem span{display: block; height: 60px;line-height: 60px;margin-left: 60px;} </style> </head> <body> <div id="adcon"></div> <script type="text/javascript"> (function(a) { 'use strict'; var container = null; var _getData = function() { return '<div>' + Math.random() + '一个列表</div>' } var _maxNum = 6; var _init = function(opt) { container = $(opt.id); if ('function' === typeof opt.getData) { _getData = opt.getData; } for (var i = 0; i < _maxNum; i++) { container.prepend(_getData); container.children(':first').show(); } var _timeid = setInterval(function() { _scrAd(); }, 2000); }; var _scrAd = function() { if (container.children().length > (_maxNum - 1)) { container.children(':last').remove(); } container.prepend(_getData); var obj = container.children(':first'); var img = obj.find('img'); obj.slideDown('slow', function() { img.addClass('swing animated infinite'); setTimeout(function() { img.removeClass('swing animated infinite'); }, 1000); }); } a.hotList = _init; })(window) 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" }]; /** * 生成指定范围内的随机数 * @param {[type]} start 开始 * @param {[type]} end 结束 * @return {[type]} int */ var suijishu = function(start, end) { return Math.floor(Math.random() * (end - start + 1) + start); }; // console.log(namelist); $(function() { hotList({ id: '#adcon', getData: function() { var data = namelist[suijishu(0, namelist.length - 1)]; return '<div class="aditem" style="display:none;"><img src="' + data.w_headimg + '"><span>' + data.w_name + ',正在玩...</span></div>'; } }); }); </script> </body> </html>