实现li列表无缝滚动的插件

• 工作过程中需要做一个自下而上的无限滚动的li列表，发现这个效果使用的次数还比较多，于是封装成一个- - 基于Jquery的小插件，如果觉得有用欢迎大家使用；
• 如发现错误也欢迎大家指正！

效果图：

话不多说，上码

(function ($) {
      $.fn.extend({
        Scroll: function (opt, callback) {
          //参数初始化
          if (!opt) var opt = {};
          var _this = this.find("ul:first");
          var lineH = _this.find("li:first").height(), //获取行高
            line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
            speed = opt.speed ? parseInt(opt.speed, 10) : 500, //滚动速度（毫秒）
            timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动时间间隔（毫秒）
          if (line == 0) line = 1;
          var upHeight = 0 - line * lineH;
          var timerID = null;
          //滚动函数开始
          var scroll = function () {
            _this.animate({
              marginTop: upHeight
            }, speed, function () {
              for (i = 1; i <= line; i++) {
                _this.find("li:first").appendTo(_this);
              }
              _this.css({
                marginTop: 0
              });
            });
          };
          // 鼠标事件绑定
          _this.hover(function () {
            clearInterval(timerID);
          }, function () {
            timerID = setInterval(scroll, timer);
          }).mouseout();
        }
      });
    })(jQuery);

示例

• Dom结构

	<div id="myscroll">
		<ul>
			<li>01</li>
			<li>02</li>
			<li>03</li>
			<li>04</li>
			<li>05</li>
			<li>06</li>
			<li>07</li>
			<li>08</li>
		</ul>
	</div>

• js调用

$("#myscroll").Scroll({
	line:1;//每次滚动行数
	speed:500;//动画时间
	timer:2000;//滚动间隔
})

样式什么的根据需求来，别但忘了最外面盒子的overflow：hidden