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