JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Le classi secondarie ereditano questi metodi dalla classe principale ed in più la estendono con metodi propri specifici per il tipo di movimento :

• initialize(): ogni classe estesa dispone di un proprio metodo costruttore che grazie all'utilizzo della già menzionata funzione $super consente di eseguire ulteriori istruzioni senza sovascrivere il metodo costruttore della classe superiore.
• executeScroll(): questa funzione viene richiamata ciclicamente da PeriodicalExecuter secondo l'intervallo di tempo specificato: in pratica si occupa di spostare lo scroller di 1px alla volta ad ogni esecuzione. A seconda del movimento orizzontale o verticale, si interviene sulle proprietà Javascript dell'elemento scrollLeft o scrollTop.

var horizontalMarquee = Class.create(newsMarquee,{

	initialize: function($super,elemen,options) {	
		$super(element,options);		
		this.initialWidth = this.element.getWidth();		
		this.childWidth = 0;		
		this.childs = this.innerDiv.childElements();
		this.childs[0].style.paddingLeft= this.initialWidth+'px';
		this.childs[this.childs.length-1].style.paddingRight= this.initialWidth+'px';
		this.childs.each(function(node) {			
 				this.childWidth += node.getWidth();
 			}.bind(this)
 		)		
  		this.innerDiv.style.width = this.childWidth+'px';
	}, 
	
	executeScroll: function() {
		if (this.element.scrollLeft > (this.element.scrollWidth-this.initialWidth)) {
    		this.element.scrollLeft = 0;
  		}
		this.element.scrollLeft = this.element.scrollLeft+5;		
	}

});


var verticalMarquee = Class.create(newsMarquee,{

	initialize: function($super,element,options) {
		$super(element,options);		
		this.initialHeight = this.element.getHeight();
		this.innerDiv.style.paddingTop = this.initialHeight+'px';
  		this.innerDiv.style.paddingBottom = this.initialHeight+'px';	
	}, 
	
	executeScroll: function() {
		if (this.element.scrollTop>=(this.element.scrollHeight-this.initialHeight)) {
			this.element.scrollTop=0; 	
		}
		this.element.scrollTop = this.element.scrollTop+1;	
	}

});

E' tutto, non rimane che istanziare contemponeareamente le classi estese (se vogliamo utilizzare entrambi i tipi di scroll) al caricamento della pagina e provare l'esempio:

Event.observe (window, 'load', function(){
	new horizontalMarquee('example');
	new verticalMarquee('example2');
}); 

E' possibile intervenire nel codice CSS per personalizzare la formattazione delle news nel modo che più ci aggrada; è anche possibile modificare le dimensioni dello scroller per inserire altri elementi, come delle immagini, ed ottenere un piacevole effetto di visualizzazione. Ho verificato il corretto funzionamento degli script proposti su piattaforma Windows nei seguenti browser: Internet Explorer 6, 7 ed 8, Mozilla Firefox, Opera e Safari. Il codice e gli esempi sono disponibili per il download.

Altri articoli

Altre guide

Altre newsletter