jQuery结合template.js实现单行文字有停顿连续向上滚动特效

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39680839/article/details/85283246

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位的话不需乘1000
        var 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);