html:
<ul><li><div id="news_all"><p style="text-align: center;margin-top: 2rem;display: none" class="notData">暫無數據</p></div></li></ul>
css:
ul {padding: .3rem;border-radius: 10px;background: #3a2b16;li {border-radius: 10px;height: 5.1rem;overflow-y: hidden;div {p {padding: 0;margin: 0;line-height: 1.5;}}}}
template模板：
<script id="allanchortasklistTemplate" type="text/html">{{each}}<p class="nickname"anchor_pfid="{{$value.pfid}}">【{{if $value.nickname}}{{$value.nickname}}】在{{/if}}<span class="date">{{$value.time | tranDateFomart}}获得XXX奖励</span></p>{{/each}}</script>时间戳：template.helper('tranDateFomart', function (item) {var date = new Date(item * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000var Y = date.getFullYear();var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);var D = date.getDate();var h = (date.getHours()+1 < 10 ? '0'+(date.getHours()+1) : date.getHours()+1);var m = (date.getMinutes()+1 < 10 ? '0'+(date.getMinutes()+1) : date.getMinutes()+1);var s = (date.getSeconds()+1 < 10 ? '0'+(date.getSeconds()+1) : date.getSeconds()+1);;return h + "时" + m + "分" + s +"秒";});
js:
var bonus_news = data.data.bonus_news;if (bonus_news && bonus_news.length > 0) {$('#news_all').empty().append(template('allanchortasklistTemplate', bonus_news));if (bonus_news.length>=13) { //bonus_news.length > scroolQ.js里面line$("#news_all").scrollQ(); //调用scroolQ.js}} else {$(".notData").show();}
json:
{"ret_code": "0","ret_msg": "ok","data": {"bonus_news": [{"time": 1540544494,"pfid": 1024253,"nickname": "11111"},{"time": 1540544494,"pfid": 1024253,"nickname": "2222"},{"time": 1540544494,"pfid": 1024253,"nickname": "33333"},{"time": 1540544494,"pfid": 1024253,"nickname": "4444"},{"time": 1540544494,"pfid": 1024253,"nickname": "55555"}]}}
引用scroolQ.js
/**** line 显示li行数* scrollNum 每次滚动li行数* scrollTime 滚动速度 单位毫秒**/(function($){var status = false;$.fn.scrollQ = function(options){var defaults = {line:12,scrollNum:1,scrollTime:900}var options=jQuery.extend(defaults,options);var _self = this;return this.each(function(){$("p",this).each(function(){$(this).css("display","none");})$("p:lt("+options.line+")",this).each(function(){$(this).css("display","block");})function scroll() {for(i=0;i<options.scrollNum;i++) {var start=$("p:first",_self);start.fadeOut(0);start.css("display","none");start.appendTo(_self);$("p:eq("+(options.line-1)+")",_self).each(function(){$(this).fadeIn(0);$(this).css("display","block");})}}var timer;timer = setInterval(scroll,options.scrollTime);_self.bind("mouseover",function(){clearInterval(timer);});_self.bind("mouseout",function(){timer = setInterval(scroll,options.scrollTime);});});}})(jQuery);
