js实现抢购滚动列表,提高活动人气

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

效果图如下:需要下载animate.css这个css动画文件 http://tool.zhaokeli.com/animate.html

若水GIF截图_2017年1月13日12点59分55秒.gif

(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>



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