|
Continuous News Ticker
Auteur: pinquin - 15 december 2010 - 11:45 - Gekeurd door: Koen - Hits: 4939 - Aantal punten: (0 stemmen)
News Ticker die continu door blijft lopen geschreven met jQuery 1.4.4
Na veel zoeken op internet niet gevonden wat ik nodig had, namelijk een nieuws ticker die continu door blijft lopen en het voorste item achteraan zet als deze uit beeld verdwenen is en het belangrijkste, niet geschreven is in action script!
Installatie:
- Download het .zip bestand.
- Roep eerst jquery.js en daarna newsticker.js aan.
- De nieuws ticker moet de style 'position: absolute' en 'overflow: hidden' bevatten.
- De nieuws-elementen container moet de style 'white-space: nowrap' bevatten.
- De nieuws-elementen moeten de style 'position: absolute' bevatten.
Aanroepen met jQuery("#newsstream_content").ticker()
mogelijke instellingen zijn {step: '30[in px]', speed: '500[1 sec = 1000]', marginNext: '10[in px]'}
Het .zip bestand bevat een werkend voorbeeld.
Uitbreiding en verbeteringen zijn altijd mogelijk!
Update:
- Stop functie toegevoegd
- Stop functie verbeterd
Download en voorbeeld niet meer beschikbaar i.v.m. domein verhuizing
|
| Code: |
<div id="news_container"><!-- Nieuws ticker -->
<div id="news_items"><!-- Nieuws-elementen container -->
<a href="#" title="">News item 1</a><!-- Nieuws-element -->
<a href="#" title="">News item 2</a>
<a href="#" title="">News item 3</a>
<a href="#" title="">News item 4</a>
<a href="#" title="">News item 5</a>
<a href="#" title="">News item 6</a>
<a href="#" title="">News item 7</a>
<a href="#" title="">News item 8</a>
</div>
</div>
<div id="news_container"><!-- Nieuws ticker --> <div id="news_items"><!-- Nieuws-elementen container --> <a href="#" title="">News item 1 </a><!-- Nieuws-element --> <a href="#" title="">News item 2 </a> <a href="#" title="">News item 3 </a> <a href="#" title="">News item 4 </a> <a href="#" title="">News item 5 </a> <a href="#" title="">News item 6 </a> <a href="#" title="">News item 7 </a> <a href="#" title="">News item 8 </a>
#news_container { position: absolute; width: 300px; height: 20px; padding: 2px 0 0 0; margin: 290px 0 0 240px; background-color: #CECECE; overflow: hidden; }
#news_items { position: relative; white-space: nowrap; }
#news_items a, #news_items img { position: absolute; color: #000000; }
#news_container { position: absolute; width: 300px; height: 20px; padding: 2px 0 0 0; margin: 290px 0 0 240px; background-color: #CECECE; overflow: hidden; } #news_items { position: relative; white-space: nowrap; } #news_items a, #news_items img { position: absolute; color: #000000; }
( function(jQuery) {
var defaults, first, last;
jQuery.fn.ticker = function(options) {
defaults = { step: '30', speed: 500, marginNext: 10 };//Standaard waarden
var options = jQuery.extend( defaults, options );
return this.each( function() {
var h = 0;
var newsticker = jQuery(this);
jQuery(newsticker).children().each( function( i, n ) {//Zet alle newsitems op de start positie
jQuery(n).css({left: h + "px"});
h += (parseInt( defaults.marginNext ) + jQuery(n).width());
});
jQuery(newsticker).css("width", h + "px");
jQuery( jQuery(newsticker).children()[jQuery(newsticker).children().length - 1] ).addClass('last_tickeritem');
start();//Start de newsticker
function ticker(item) {
jQuery(item).animate( { left: '-=' + defaults.step}, parseInt( defaults.speed ), 'linear', function() {
if( jQuery(this).position()['left'] + jQuery(this).width() < 0 ) {
last = jQuery(".last_tickeritem").removeClass('last_tickeritem');
first = jQuery(this).addClass('last_tickeritem').css({ left: Math.round( jQuery(last).position()['left'] + jQuery(last).width() + parseInt( defaults.marginNext ) ) + "px"}).remove();
jQuery(newsticker).append( jQuery(first) );
ticker( jQuery(first) );
} else ticker( jQuery(this) );
});
}
jQuery(newsticker).parent().hover( function() { jQuery(this).children().children().stop(); }, function() { start(); });
function start() { jQuery(newsticker).children().each( function( i, n ) { ticker(jQuery(n)); }); }
});
};
} )( jQuery );
( function(jQuery) { var defaults, first, last; jQuery.fn.ticker = function(options) { defaults = { step: '30', speed: 500, marginNext: 10 };//Standaard waarden var options = jQuery.extend( defaults, options ); return this.each( function() { var h = 0; var newsticker = jQuery(this); jQuery(newsticker).children().each( function( i, n ) {//Zet alle newsitems op de start positie jQuery(n).css({left: h + "px"}); h += (parseInt( defaults.marginNext ) + jQuery(n).width()); }); jQuery(newsticker).css("width", h + "px"); jQuery( jQuery(newsticker).children()[jQuery(newsticker).children().length - 1] ).addClass('last_tickeritem'); start();//Start de newsticker function ticker(item) { jQuery(item).animate( { left: '-=' + defaults.step}, parseInt( defaults.speed ), 'linear', function() { if( jQuery(this).position()['left'] + jQuery(this).width() < 0 ) { last = jQuery(".last_tickeritem").removeClass('last_tickeritem'); first = jQuery(this).addClass('last_tickeritem').css({ left: Math.round( jQuery(last).position()['left'] + jQuery(last).width() + parseInt( defaults.marginNext ) ) + "px"}).remove(); jQuery(newsticker).append( jQuery(first) ); ticker( jQuery(first) ); } else ticker( jQuery(this) ); }); } jQuery(newsticker).parent().hover( function() { jQuery(this).children().children().stop(); }, function() { start(); }); function start() { jQuery(newsticker).children().each( function( i, n ) { ticker(jQuery(n)); }); } }); }; } )( jQuery );
 Download code (.txt)
|
|
 Stemmen |
| Niet ingelogd. |
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
