Continuous News Ticker

Auteur: pinquin - 15 december 2010 - 11:45 - Gekeurd door: Koen - Hits: 4918 - 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:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<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>
	</div>
</div>

css code - Bekijk de code zonder highlighting - Klap code in

                #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; }
 

javascript code - Bekijk de code zonder highlighting - Klap code in

                ( 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.

Reacties

Post een reactie

Lees de reacties (4)