Just in case the original source disappears here’s the code from that page:
HTML:
<div id="scrollup"> <div class="headline"> ... </div> <div class="headline"> ... </div> <div class="headline"> ... </div> <div class="headline"> ... </div> </div>
CSS:
#scrollup
{
position: relative;
overflow: hidden;
border: 1px solid #000;
height: 200px;
width: 200px
}
.headline
{
position: absolute;
top: 210px;
left: 5px;
height: 195px;
width:190px;
}Javascript:
var headline_count; var headline_interval; var old_headline = 0; var current_headline = 0; $(document).ready(function() { headline_count = $("div.headline").size(); $("div.headline:eq("+current_headline+")").css('top', '5px'); headline_interval = setInterval(headline_rotate,5000); $('#scrollup').hover(function() { clearInterval(headline_interval); }, function() { headline_interval = setInterval(headline_rotate,5000); headline_rotate(); }); }); function headline_rotate() { current_headline = (old_headline + 1) % headline_count; $("div.headline:eq(" + old_headline + ")").animate({top: -205},"slow", function() { $(this).css('top', '210px'); }); $("div.headline:eq(" + current_headline + ")").animate({top: 5},"slow"); old_headline = current_headline; }
No comments:
Post a Comment