大涛子客栈

文字向上滚动分为：无缝滚动、间歇性滚动

间歇性滚动

使用jQuery的 animate

一般情况下，向上翻滚一行内容，即一个<li></li>，但是如果是一行有多个li标签，要使用常见的插件就会出现问题了…

所以自己改吧改吧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
(function ($) {
  $.fn.myScroll = function(options) {
    var init = {
      items: 1,  //一行有几项内容
      speed: 3000,  //滚动速度
      moveHeight: 22  // 行高
    };

    var intId = [];
    var opts = $.extend({}, init, options);
    
    function moveUp(obj) {
      obj.animate({
        marginTop: '-' + opts.moveHeight + 'px'
      },
      1000,
      function() {
        var $this = $(this);
        $this.find('li').slice(0, opts.items).appendTo($this);
        $this.css('margin-top', 0);
      })
    }

    this.each(function(i) {
      var sh = opts.moveHeight,
        speed = opts.speed,
        items = opts.items,
        $this = $(this);

      intId[i] = setInterval(timerEvent, speed);

      $this.hover(function() {
        clearInterval(intId[i]);
      }, function() {
        intId[i] = setInterval(timerEvent, speed);
      });
      var len = $this.find('li').length;
      if(len > items && len <= items * 2) {
        $this.html($this.html() + $this.html());
      }
      function timerEvent() {
        var len = $this.find('li').length;
        if(len > items && len <= items * 2) {
          len /= 2;
        }
        if(len <= items) {
          clearInterval(intId[i]);
        } else {
          moveUp($this, sh);
        }
      }
    });
  }
})(jQuery);
$('#scrollLists').myScroll({
  items: 3,
  speed: 3000,
  moveHeight: 22
});

以下的都是单行内容翻滚，搬过来记录下：

使用JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Scroll() {}
Scroll.prototype.upScroll = function (dom, _h, interval) {
  var dom = document.getElementById(dom);
  var timer = setTimeout(function () {
    var _field = dom.children[0];
    _field.style.marginTop = _h;
    clearTimeout(timer);
  }, 1000)
  setInterval(function () {
    var _field = dom.children[0];
    _field.style.marginTop = "0px";
    dom.appendChild(_field);
    var _field = dom.children[0]
    _field.style.marginTop = _h;
  }, interval)
}
var myScroll = new Scroll();

用法：

1
2
3
4
5
6
7
8
/*
 * demo 父容器(ul)的id
 * -36px 子元素li的高度
 * 3000  滚动间隔时间
 * 每次滚动持续时间可到css文件中修改
 * （找不到原文了-.-）
 */
myScroll.upScroll("demo","-36px",3000);

无缝滚动

下载地址：简单的jQuery无缝向上滚动效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
(function ($) {
  $.fn.myScroll = function (options) {
    //默认配置
    var defaults = {
      speed: 40, //滚动速度,值越大速度越慢
      rowHeight: 24 //每行的高度
    };

    var opts = $.extend({}, defaults, options),
      intId = [];

    function marquee(obj, step) {

      obj.find("ul").animate({
        marginTop: '-=1'
      }, 0, function () {
        var s = Math.abs(parseInt($(this).css("margin-top")));
        if (s >= step) {
          $(this).find("li").slice(0, 1).appendTo($(this));
          $(this).css("margin-top", 0);
        }
      });
    }

    this.each(function (i) {
      var sh = opts["rowHeight"],
        speed = opts["speed"],
        _this = $(this);
      intId[i] = setInterval(function () {
        if (_this.find("ul").height() <= _this.height()) {
          clearInterval(intId[i]);
        } else {
          marquee(_this, sh);
        }
      }, speed);

      _this.hover(function () {
        clearInterval(intId[i]);
      }, function () {
        intId[i] = setInterval(function () {
          if (_this.find("ul").height() <= _this.height()) {
            clearInterval(intId[i]);
          } else {
            marquee(_this, sh);
          }
        }, speed);
      });
    });
  }

})(jQuery);

$(function(){
    $('.myscroll').myScroll({
    	speed: 40, //数值越大，速度越慢
    	rowHeight: 26 //li的高度
    });
});

 上一页

JavaScript

 评论