上善若水，水善利万物而不争!

从项目中剥离不出的一个文字一行一行向上滚动的JS效果，加上了一些备注，方便日后复用。 猛击查看效果

简单的描述下这个效果运行的过程：

比如有5行替换滚动的文字，每行高度20px，那么div的高度就为20px，这样初使就只显示一行文字。

1、div整体向上移动20px；

2、将div里的第一个子元素移动到最后一行；(通过jQuery来实现非常简单)

3、重复以上步骤；

HTML部分

    <div id="scroll-text">
        <h2 class='scrollList'>国际新闻1<span><a href='news-detail.aspx?id=12'>萨达姆就萨达姆，叫什么本拉登!</a></span></h2>
  <h2 class='scrollList'>国际新闻2<span><a href='news-detail.aspx?id=12'>萨达姆就萨达姆，叫什么本拉登!</a></span></h2>
  <h2 class='scrollList'>国际新闻3<span><a href='news-detail.aspx?id=12'>萨达姆就萨达姆，叫什么本拉登!</a></span></h2>
  <h2 class='scrollList'>国际新闻4<span><a href='news-detail.aspx?id=12'>萨达姆就萨达姆，叫什么本拉登!</a></span></h2>
  <h2 class='scrollList'>国际新闻5<span><a href='news-detail.aspx?id=12'>萨达姆就萨达姆，叫什么本拉登!</a></span></h2>
    </div>

调用 [参数：每次滚动的行数，滚动的速度，换行的速度]

$("#scroll-text").Scroll({ line: 1, speed: 300, timer: 3000 });

JS部分，写成了jQuery扩展方法，方便调用

    (function($) {
        $.fn.extend({
            Scroll: function(opt, callback) {
                if (!opt) var opt = {};
                //获取div
                var _this = this.eq(0);
                _this.css({ overflow: "hidden", display: "block" });
                //获取第一行滚动对象
                var _line = _this.find(".scrollList:first");
                //获取滚动的行高，包括padding的高
                var lineH = _line.height() + parseInt(_line.css("padding-top")) + parseInt(_line.css("padding-bottom"));
                //每次滚动的行数，如果没设置，默认为div所能显示的行数
                var line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10);
                //滚动速度
                var speed = opt.speed ? parseInt(opt.speed, 10) : 500;
                //滚动间隔毫秒
                var timer = opt.timer ? parseInt(opt.timer, 10) : 3000;
                if (line == 0) line = 1;
                //div向上移动的距离
                var upHeight = 0 - line * lineH;
                
                //滚动函数
                scrollUp = function() {
                    _this.animate({
                        marginTop: upHeight
                    }, speed, function() {
                        //将第一个对象移动到最后一行
                        _this.find(".scrollList:lt(" + line + ")").appendTo(_this);
                        //还原div的top位置
                        _this.css({ marginTop: 0 });
                    });
                }
                //鼠标移上时停止滚动
                _this.hover(function() {
                    clearInterval(timerID);
                }, function() {
                    timerID = setInterval("scrollUp()", timer);
                }).mouseout();
            }
        })
    })(jQuery)