jquery 视觉特效（新闻滚动浏览）

效果描述：

让文本形式新闻，显示给访问站点的人看。让新闻在一个不可见窗口中往上滚动，当新闻全部滚动到上面消失之后，在窗口底部重新出现，并继续向上滚动。

HTML:

<div id="scroller">
            <p>
               据韩国《朝鲜日报》10月6日报道，美国国会在上月出版的一份报告中证实，美国在中日存在主权纠纷的钓鱼岛问题上，只承认日本的“行政权”，而非承认日本对其拥有“主权”。

　　据报道，美国国会调查局（CRS）将1996年报告修改后，于上月末重新出版了一份题为《钓鱼岛纠纷：美国条约的义务》的报告。该报告显示，美国政府委托国会批准1972年与日本签署的《返还冲绳协议》时表示：“将钓鱼岛行政权转交给日本，并不意味着对该岛屿的主权主张有任何倾向。”也就是说，美国当时虽然将二战停战后负责管理的钓鱼岛返还给日本政府，但对于中日两国对钓鱼岛的主权主张持“中立态度”。

　　针对美国国会提出的“《返还冲绳协议》是否会影响钓鱼岛主权”这一问题，美国时任国务卿威廉-罗杰斯当时也曾回答说：“对这些岛屿的法律地位（主权）没有任何影响。”

　　另外，美国国务院代理法律顾问罗伯特-斯塔尔也曾表示：“美国不能扩大日本移交给我们（美国）之前它曾对钓鱼岛拥有的法律权利，现在将其返还，也不能缩小其他主张主权国家的权利。”报道说，这表明，美国不会对主权纠纷产生任何影响，且将对该问题保持距离。

　　不过，这一报告也指出：“美国虽然在钓鱼岛主权问题上持中立态度，但《美日安保条约》的适用对象确实包括钓鱼岛。”因为《美日安保条约》规定其适用对象为“日本拥有行政权的地区”。　
            </p>
</div>

css：

        #scroller{     
                margin: auto;
                width: 230px;         
                height: 240px; 
                border: 2px solid;       
                padding: 10px;    
                position: relative;
                overflow: hidden;
            }
            #scroller p{
                font-weight: bold;
                position: relative;
            }

jquery：

$(document).ready(function(){
    var $scroller = $('#scroller p');
    $scroller.css({top:0});
//    p的高度
    p_height = $scroller.height();
//    整个p文本向上移动的高度需要多加上一些距离，才能让最后一行文字完全消失后再重新出现。这里我给了一个25
    p_move_height=p_height+25;
    var animator = function(imgblock){
        imgblock.animate({
            top:'-'+p_move_height
        },
        10000,
        function(){
            imgblock.css({
                top:250
                });
            animator(imgblock);
        }             
        );
    }
    animator($scroller);
});

上面的效果是使用jquery的animate()方法实现的。也可以使用css()方法实现。其代码如下：

$(document).ready(function(){
    var $scroller = $('#scroller p');
    var $wrapper = $('#scroller');
    $scroller.css({top:0});
//    scroller的高度 
    s_height = $wrapper.height();
//    p的高度
    p_height = $scroller.height();
//    设置初始向上滚动的距离
    move_lines = 0;
    
    scroll();
});

function scroll(){
//    每次改变move_lines的减2
    move_lines -= 2;
//    使用css()向上移动move_lines距离
    $('#scroller p').css({top:move_lines+'px'});
//    如果move_lines的小于负数的文本P的高度
    if(move_lines<-1*p_height){
//        文本p从新返回窗口底部
        move_lines = s_height;
    }
    
    setTimeout(scroll,50);
}

 如果我现在想为上面的css()方法滚动的效果增加鼠标悬停功能呢？

实现代码如下：

$(document).ready(function(){
    var $scroller = $('#scroller p');
    var $wrapper = $('#scroller');
    $scroller.css({top:0});
//    scroller的高度 
    s_height = $wrapper.height();
//    p的高度
    p_height = $scroller.height();
//    设置初始向上滚动的距离
    move_lines = 0;
    
//    设置滚动初始值为true
    rolling = true;
    $wrapper.hover(
    function(){
        rolling = false;
    },function(){
        rolling = true;
    }
);
    scroll();
});

function scroll(){
//    如果rolling为真。则每次改变move_lines的减2
    move_lines -= rolling?2:0;
//    使用css()向上移动move_lines距离
    $('#scroller p').css({top:move_lines+'px'});
//    如果move_lines的小于负数的文本P的高度
    if(move_lines<-1*p_height){
//        文本p从新返回窗口底部
        move_lines = s_height;
    }
    
    setTimeout(scroll,50);
}

 

最终效果，拷贝复制即可看到。