Har ændret lidt i koden og tilføjet nogle kommentarer i javascript-delen.
<html>
<head>
<title>News Scroller</title>
<script type="text/javascript" src="
http://code.jquery.com/jquery-latest.pack.js"></script><style type="text/css">
#scrollup {
position: relative;
overflow: hidden;
border: 1px solid #000;
height: 195px;
width: 195px
}
.headline {
position: absolute;
top: 205px;
left: 5px;
height: 195px;
width:190px;
color:#000000;
}
.headline span.date{
color:#0000ff;
display:block;
}
</style>
<script type="text/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);// Delay (5 sek)
$('#scrollup').hover(function() {
clearInterval(headline_interval);
}, function() {
headline_interval = setInterval(headline_rotate,5000);// Delay (5 sek)
headline_rotate();
});
});
function headline_rotate() {
current_headline = (old_headline + 1) % headline_count;
$("div.headline:eq(" + old_headline + ")")
.animate({top: -200},2000, function() { // De 2000 angiver hvor hurtigt teksten skal rulle
$(this).css('top', '205px');
});
$("div.headline:eq(" + current_headline + ")")
.animate({top: 5},2000); // De 2000 angiver hvor hurtigt teksten skal rulle
old_headline = current_headline;
}
</script>
</head>
<body>
<div id="scrollup">
<div class="headline">
<span class="date">18. november 2010</span>
Nyhed 1
</div>
<div class="headline">
<span class="date">19. november 2010</span>
Nyhed 2
</div>
<div class="headline">
<span class="date">21. november 2010</span>
Nyhed 3
</div>
<div class="headline">
<span class="date">29. november 2010</span>
Nyhed 4
</div>
</div>
</body>
</html>
