| ||||||||||||||||
 StaffScripts Scroller per testo in layer | |||||||||||||||||||||||||
| Autore: Riccardo | Data: 22/01/2002 | Downloads: 2092 | Voto: 3,8/5 | Download | P r o v a | ||||||||||||||||||||
|
Scroller per testo in layer
Uno script molto d'effetto per le vostre pagine web: consente di presentare un testo (o delle news o comunque dei "contenuti" anche grafici) che possono essere scrollati non con le solite barre di sistema, ma posizionando il mouse su un link (onMouseOver).
Lo script si basa su sole 4 funzini, la più complicata delle quali è la classica Start() che come al solito prepara i livelli al caricamento della pagina. La parte HTML è abbastanza semplice, come potrete vedere nella pagina d'esempio si compone solo di uno stile per il testo del livello, due links su cui passeremo il mouse per scrollare il testo e di un livello. Completa il quadro il solito event-handler onLoad() inserito nel <BODY>. Analizziamo velocemente l'unico tag "delicato" della parte HTML: <DIV ID="textLayer" STYLE="position:absolute;top:150;left:150;width:200; [... ...] height:80;clip:rect(0,200,80,0)" CLASS="testo"><SPAN ID="divN6"> . . . . . . [ . . . contenuto della vostra pagina . . . . . . Io ci ho messo un brano di uno dei miei libri preferiti :-) . . . . . . ] . . . </SPAN></DIV>Un DIV assolutamente normale se non fosse per quello <SPAN> che ho colorato in rosso. Lo SPAN serve solo per Netscape 6, infatti questo browser non dispone (stando a quanto ho trovato) di una proprietà che consenta di ottenere l'altezza di un livello che non sia interamente visibile, cioè non limitato dal CLIP; dispone solo della proprietà "height" (stando alla documentazione sul DOM 2 pagg. 280-282) che applicata al livello ci restituirebbe non l'altezza del documento contenuto, bensì l'altezza del livello stesso come specificato nello STYLE. Il trucchetto che ho usato è stato includere uno <SPAN> la cui altezza viene letta solo da Netscape 6. Veniamo allo script: // --- Sezione personalizzabile
var Step = 5;
var Tempo = 100;
// --- Fine Sezione personalizzabile
var nn = document.layers?true:false;
var N6 = navigator.userAgent.toLowerCase().indexOf("gecko")!=-1?true:false;
var LayText=null;
var AltezzaLivello=0;
var LarghezzaLivello=0;
var Limite =0;
var texTop=0;
var DeltaTop = 0;
var timsc=null;
function Start()
{
LayText=nn?document.layers.textLayer:N6?document.getElementById("textLayer").style:document.all.textLayer.style;
DeltaTop=nn?LayText.top:N6?document.getElementById("textLayer").offsetTop:document.all.textLayer.offsetTop;
AltezzaLivello=parseInt(nn?LayText.clip.height:N6?LayText.height:LayText.height);
LarghezzaLivello=parseInt(nn?LayText.clip.width:N6?LayText.width:LayText.width);
Limite=-AltezzaLivello+(nn?LayText.document.height:N6?document.getElementById("divN6").offsetHeight: [...
...] document.all.textLayer.clientHeight);
}
function Move(where)
{
where?texTop>=Limite?null:texTop+=Step:texTop==0?null:texTop-=Step;
LayText.top=-texTop+DeltaTop;
if (nn)
{
LayText.clip.top=texTop;
LayText.clip.bottom=eval(texTop+AltezzaLivello);
}
else
LayText.clip = "rect(" + texTop + ", " + LarghezzaLivello + ", " +eval(texTop+AltezzaLivello) + ", 0)";
}
function StartScroll(updown)
{
timsc=setInterval(updown?"Move(true)":"Move(false)",Tempo);
}
function StopScroll()
{
clearInterval(timsc);
}
Nella sezione personalizzabile troviamo le uniche due variabili che dovranno essere settate secondo preferenze. La prima (Step) rappresenta il numero di pixel dei quali si scrolla il nostro livello; la seconda (Tempo) è invece il tempo che intercorre fra due spostamenti successivi (il parametro di setTimeout() nella funzione startscroll() che vedremo fra un po') e va espresso come al solito in millisecondi. Segue una sezione in cui vengono dichiarate le variabili globali che verranno usate dallo script. E veniamo alla prima funzione. Start() si preoccupa innanzitutto di individuare, nella prima linea, il livello che contiene il testo da scrollare, successivamente assegna a DeltaTop la distanza del livello dal margine superiore del documento (va a leggere la proprietà top assegnata al livello) e poi l'altezza e la larghezza dello stesso leggendo rispettivamente le proprietà width ed height. Per chi non lo sapesse qui è necessario usare il parseInt() perché Explorer e Netscape 6 restituiscono una stringa invece che un numero. Successivamente assegna a Limite l'altezza del livello con segno negativo cui aggiungo l'altezza del contenuto da scrollare (notate che qui, come accennavo prima, per Netcape6 non leggo l'altezza del DIV, bensì quella dello SPAN). In pratica la variabile Limite contiene il valore massimo di spostamento del testo costituita dall'altezza del contenuto da scrollare meno l'altezza dell'area visibile del livello. Lo scrolling del livello infatti avviene modificando la porzione visibile del livello (CLIPPING) e contemporaneamente spostandolo verso l'alto di un numero di pixel uguale; quindi lo spostamento, come vedremo fra poco, deve terminare quando l'ultima riga del testo è visibile appena sopra il margine inferiore del DIV. Senza dilungarmi eccessivamente: chi non ha mai visto l'uso della proprietà CLIP deve semplicemente eliminare o commentare la linea 39 dello script per rendersi conto di come venga spostata verso il basso l'area visibile del DIV , quindi lo scrolling lo otteniamo spostando in basso l'area visibile e contemporaneamente spostando verso l'alto il livello nella funzione successiva. Prima di Move() analizziamo i links su e giu e le funzioni collegate. Nella sezione HTML della pagina vedrete che i due link sono collegati agli script con gli event-handler onMouseOver e onMouseOut. Il link su esegue StartScroll() con parametro true, mentre il link giu esegue la stessa funzione ma con parametro false; la funzione StartScroll() attiva un setInterval() passando a Move() lo stesso valore (true o false) e colleganto il setInterval() alla variabile timsc. Quando invece il mouse lascia il link viene eseguita la StopScroll() che semplicemente cancella il setInterval() (per maggiori chiarimenti su setInterval() andate a leggere il tutorials relativo. E veniamo a Move() where assume valore true o false secondo quanto passato da StartScroll(). La prima riga è la più importante, analizziamola nella più consueta forma if () {}: if (where == true)
{
if (texTop>=Limite)
{
null
}
else
{
texTop+=Step
}
}
else
{
if (texTop==0)
{
null
}
else
{
texTop-=Step
}
}
Quel che succede è che se where è "true" lo script controlla che texTop non abbia raggiunto il valore Limite (cioè il layer non abbia finito di scrollare), se lo ha raggiunto o superato non fa nulla (null) altrimenti lo incrementa del valore Step. Se invece where è "false" (scrolling in basso) controlla che il valore di texTop non sia zero (è visibile l'inizio del layer) ed in tal caso di nuovo non fa nulla altrimenti decrementa la variabile (N.B. "null" sarebbe superfluo nelle if(), ma sono necessari nella struttura ?:). Una volta cambiato il valore di texTop lo script sposta in alto il livello e successivamente, con sintassi diversa per Netscape 4 e gli altri browser, modifica la CLIPPING area, terminando il suo lavoro. Naturalmente se il setInterval() è attivo la funzione verrà rieseguita. Nel livello potete metterci quello che volete dovrebbe funzionare di tutto. Io ho provato testi, immagini e forms, e nell'esempio lascio una citazione del mio libro preferito, non ho invece provato a metterci qualche animazione FLASH o qualche JAVA, ma dovrebbero funzionare lo stesso. L'unica cosa che dovete evitare, o comunque verificare per bene, è l'uso del tag <PRE> o similari perché da qualche prova che ho fatto ho visto che il testo a volte non era tutto visibile. Infine: evoluzione naturale di questo script è uno scroller per news automatico: lo vedremo fra qualche giorno. | |||||||||||||||||||||||||
| |||||||||||||||||||||||||
| Per navigare correttamente il sito è necessario abilitare i cookies. |
| Enjoy Open Source! |
Stampa
Segnala 
Preferiti 
