Michele Basso
a- a+

Creare uno scroller dinamico per le news

Con questo DHTML creeremo uno scroller per le news, bellograficamente e molto semplice da installare ed utilizzare. Loscript è compatibile con tutte le versioni di InternetExplorer e di Netscape.

Per utilizzare lo script, copiamo questo codiceall'interno del tag body:

<script language="JavaScript1.2">/*Pausing updown message scroller- © Dynamic Drive (www.dynamicdrive.com)For full source code, installation instructions,Terms Of Use, visit http://www.dynamicdrive.com*///configure the below five variables to change the style of the scrollervar scrollerwidth='150px'var scrollerheight='105px'var scrollerbgcolor='lightyellow'//set below to '' if you don't wish to use a background imagevar scrollerbackground='scrollerback.gif'//configure the below variable to change the contents of the scrollervar messages=new Array()messages[0]="<font face='Arial'><a href='http://www.dynamicdrive.com'>Click here to go back to Dynamicdrive.com frontpage</a></font>"messages[1]="<font face='Arial'><a href='http://javascriptkit.com'>Visit JavaScriptKit for award winning JavaScript tutorials</a></font>"messages[2]="<font face='Arial'><a href='http://www.codingforums.com'>Get help on scripting and web development. Visit CodingForums.com!</a></font>"messages[3]="<font face='Arial'><a href='http://www.freewarejava.com'>Looking for Free Java applets? Visit Freewarejava.com!</a></font>"messages[4]="<font face='Arial'><a href='http://dynamicdrive.com/link.htm'>If you find this script useful, please click here to link back to Dynamic Drive!</a></font>"///////Do not edit pass this line///////////////////////var ie=document.allvar dom=document.getElementByIdif (messages.length>2)i=2elsei=0function move1(whichlayer){tlayer=eval(whichlayer)if (tlayer.top>0&&tlayer.top<=5){tlayer.top=0setTimeout("move1(tlayer)" ,3000)setTimeout("move2(document.main.document.second)" ,3000)return}if (tlayer.top>=tlayer.document.height*-1){tlayer.top-=5setTimeout("move1(tlayer)" ,50)}else{tlayer.top=parseInt(scrollerheight)tlayer.document.write(messages[i])tlayer.document.close()if (i==messages.length-1)i=0elsei++}}function move2(whichlayer){tlayer2=eval(whichlayer)if (tlayer2.top>0&&tlayer2.top<=5){tlayer2.top=0setTimeout("move2(tlayer2)" ,3000)setTimeout("move1(document.main.document.first)" ,3000)return}if (tlayer2.top>=tlayer2.document.height*-1){tlayer2.top-=5setTimeout("move2(tlayer2)" ,50)}else{tlayer2.top=parseInt(scrollerheight)tlayer2.document.write(messages[i])tlayer2.document.close()if (i==messages.length-1)i=0elsei++}}function move3(whichdiv){tdiv=eval(whichdiv)if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){tdiv.style.top=0+ "px"setTimeout("move3(tdiv)" ,3000)setTimeout("move4(second2_obj)" ,3000)return}if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){tdiv.style.top=parseInt(tdiv.style.top)-5+ "px"setTimeout("move3(tdiv)" ,50)}else{tdiv.style.top=parseInt(scrollerheight)tdiv.innerHTML=messages[i]if (i==messages.length-1)i=0elsei++}}function move4(whichdiv){tdiv2=eval(whichdiv)if (parseInt(tdiv2.style.top)>0&&parseInt(tdiv2.style.top)<=5){tdiv2.style.top=0+ "px"setTimeout("move4(tdiv2)" ,3000)setTimeout("move3(first2_obj)" ,3000)return}if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){tdiv2.style.top=parseInt(tdiv2.style.top)-5+ "px"setTimeout("move4(second2_obj)" ,50)}else{tdiv2.style.top=parseInt(scrollerheight)tdiv2.innerHTML=messages[i]if (i==messages.length-1)i=0elsei++}}function startscroll(){if (ie||dom){first2_obj=ie? first2 : document.getElementById("first2")second2_obj=ie? second2 : document.getElementById("second2")move3(first2_obj)second2_obj.style.top=scrollerheightsecond2_obj.style.visibility='visible'}else if (document.layers){document.main.visibility='show'move1(document.main.document.first)document.main.document.second.top=parseInt(scrollerheight)+5document.main.document.second.visibility='show'}}window.onload=startscroll</script><ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; background=&{scrollerbackground}; visibility=hide><layer id="first" left=0 top=1 width=&{scrollerwidth};><script language="JavaScript1.2">if (document.layers)document.write(messages[0])</script></layer><layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide><script language="JavaScript1.2">if (document.layers)document.write(messages[dyndetermine=(messages.length==1)? 0 : 1])</script></layer></ilayer><script language="JavaScript1.2">if (ie||dom){document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+ ';height:'+scrollerheight+ ';overflow:hidden;background-color:'+scrollerbgcolor+ ' ;background-image:url('+scrollerbackground+ ')">')document.writeln('<div style="position:absolute;width:'+scrollerwidth+ ';height:'+scrollerheight+ ';clip:rect(0 '+scrollerwidth+ ' '+scrollerheight+ ' 0);left:0px;top:0px">')document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+ ';left:0px;top:1px;">')document.write(messages[0])document.writeln('</div>')document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+ ';left:0px;top:0px;visibility:hidden">')document.write(messages[dyndetermine=(messages.length==1)? 0 : 1])document.writeln('</div>')document.writeln('</div>')document.writeln('</div>')}</script>

Adesso passiamo alla configurazione.

var scrollerwidth='150px' Lalarghezza del box delle news
var scrollerheight='105px'
L'altezzadel box delle news
var scrollerbgcolor='lightyellow'
Il coloredi sfondo del box
var scrollerbackground='scrollerback.gif'
L'immagine di sfondo del box; se non si vogliono inserireimmagini, lasciare vuoto lo spazio fra i dueapici('')

Per ogni news che vogliamo inserire, si utilizza una porzionedi codice come la seguente:

messages[0]="<font face='Arial'><a href='http://www.dynamicdrive.com'>Click here to go back to Dynamicdrive.com frontpage</a></font>"

Possiamo sceglierel'url(http://www.dynamicdrive.com) e ladescrizione della news(Click here to go back toDynamicdrive.com frontpage).

Naturalmente per ogni messaggio dobbiamo incrementare ilvalore dell'array(messages[0]). Inquesto caso è lo 0(zero).

Per problemi nell'utilizzo dello script, poteteconsultare il nostro forum didiscussione.

 



Ti potrebbe interessare anche

commenta la notizia