效果描述：
让文本形式新闻，显示给访问站点的人看。让新闻在一个不可见窗口中往上滚动，当新闻全部滚动到上面消失之后，在窗口底部重新出现，并继续向上滚动。
HTML:
据韩国《朝鲜日报》10月6日报道，美国国会在上月出版的一份报告中证实，美国在中日存在主权纠纷的钓鱼岛问题上，只承认日本的“行政权”，而非承认日本对其拥有“主权”。 据报道，美国国会调查局（CRS）将1996年报告修改后，于上月末重新出版了一份题为《钓鱼岛纠纷：美国条约的义务》的报告。该报告显示，美国政府委托国会批准1972年与日本签署的《返还冲绳协议》时表示：“将钓鱼岛行政权转交给日本，并不意味着对该岛屿的主权主张有任何倾向。”也就是说，美国当时虽然将二战停战后负责管理的钓鱼岛返还给日本政府，但对于中日两国对钓鱼岛的主权主张持“中立态度”。 针对美国国会提出的“《返还冲绳协议》是否会影响钓鱼岛主权”这一问题，美国时任国务卿威廉-罗杰斯当时也曾回答说：“对这些岛屿的法律地位（主权）没有任何影响。” 另外，美国国务院代理法律顾问罗伯特-斯塔尔也曾表示：“美国不能扩大日本移交给我们（美国）之前它曾对钓鱼岛拥有的法律权利，现在将其返还，也不能缩小其他主张主权国家的权利。”报道说，这表明，美国不会对主权纠纷产生任何影响，且将对该问题保持距离。 不过，这一报告也指出：“美国虽然在钓鱼岛主权问题上持中立态度，但《美日安保条约》的适用对象确实包括钓鱼岛。”因为《美日安保条约》规定其适用对象为“日本拥有行政权的地区”。
#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);}
最终效果，拷贝复制即可看到。