简易的上下循环滚动代码

使用场景

很简单的js上下滚动功能，可配置单行/多行滚动、速度、间隔时间、节点等最常用功能。记这里备忘。

演示

https://denghao.me/demo/2018/simpleScroll/index.html

源码

html结构

<div id="J-scroll">
    <ul>
      <li>11111</li>
      <li>22222</li>
      <li>33333</li>
    </ul>
</div>

核心方法 (依赖JQuery)

var simpleScroll = function (opts) {
  var opts = $.extend({
    wrapNode: '',   //父节点
    listNode: 'ul', //列表节点
    itemNode: 'li', //单个节点
    speed: 500,     //滚动速度
    duration: 2000, //间隔时间(毫秒)
    line: 1         //滚动行数
  }, opts);

  var $list = $(opts.wrapNode).find(opts.listNode),
    lineH = $list.find(opts.itemNode + ":first").height(),
    upHeight = 0 - opts.line * lineH;

  var scrollUp = function () {
    $list.animate({
      marginTop: upHeight
    }, opts.speed, function () {
      for (var i = 0; i < opts.line; i++) {
        $list.find(opts.itemNode + ":first").appendTo($list);
      }
      $list.css({ marginTop: 0 });
    });
  }
  window.setInterval(scrollUp, opts.duration);
}

开始调用

simpleScroll({
      wrapNode: '#J-scroll',
      line: 1,
      duration: 1000,
      speed: 500
    });