html纵向滚动新闻,新闻段落滚动HTML5代码 向上无缝循环

jquery向上循环滚动的新闻效果

#ticker { width:180px; height:300px; border:1px solid #aaaaaa; overflow:auto; }

#ticker dt { font:normal 14px Georgia; padding:0 10px 5px 10px; background-color:#e5e5e5; padding-top:10px; border:1px solid #ffffff; border-bottom:none; border-right:none; position:relative; }

#ticker dd { margin-left:0; font:normal 11px Verdana; padding:0 10px 10px 10px; border-bottom:1px solid #aaaaaa; background-color:#e5e5e5; border-left:1px solid #ffffff; position:relative; }

#ticker dd.last { border-bottom:1px solid #ffffff; }

#ticker div { margin-top:0; }

This is a news title!

This is a snippet of the news. It could be the whole news item or it could link to another page containing...

News Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

News Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

News Heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This item is long!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

$(function() {

var ticker = $("#ticker");

ticker.children().filter("dt").each(function() {

var dt = $(this),

container = $("

");

dt.next().appendTo(container);

dt.prependTo(container);

container.appendTo(ticker);

});

ticker.css("overflow", "hidden");

function animator(currentItem) {

var distance = currentItem.height();

duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;

currentItem.animate({ marginTop: -distance }, duration, "linear", function() {

currentItem.appendTo(currentItem.parent()).css("marginTop", 0);

animator(currentItem.parent().children(":first"));

});

};

animator(ticker.children(":first"));

ticker.mouseenter(function() {

ticker.children().stop();

});

ticker.mouseleave(function() {

animator(ticker.children(":first"));

});

});