Benvenuto su Oceano Risorse per Webmasters
Modules
· Home
· Argomenti
· Backgrounds
· Banners
· Colorhex
· Downloads
· Fonts
· Gallery
· Gif Animate
· Javascripts
· Manuali
· Recommend Us
· Themes
· Wallpapers
· Web Links
Gallery



Partners
Hosting gratuito

Open Source software development website

HTML.it - il portale italiano sul web publishing

Gratis.it

Dynamic Drive - DHTML code library

BOORP - archivio di risorse gratuite
Shinystat
 
Javascript Blocco con contenuto scorrevole
Postato da webmaster il Tuesday, 02 May @ 00:00:00 CEST
Contributo di webmaster

In questo articolo realizzeremo un blocco al cui interno verrà visualizzato del contenuto scorrevole in verticale. Il blocco potrà contenere messaggi, immagini o anche codice html. Di facile personalizzazione, basterà agire solo su tre variabili all'inizio dello script, impostando la durata della pausa iniziale, la velocità di scorrimento e la pausa al passaggio del mouse.

Procediamo inserendo tra i tags <head> della pagina, il codice css in cui è definito l'aspetto grafico del blocco:

<style type="text/css">

#marqueecontainer{
position: relative;
width: 200px; /* larghezza */
height: 200px; /* altezza */
background-color: white;
overflow: hidden;
border: 3px solid orange;
padding: 2px;
padding-left: 4px;
}

</style>

Sempre tra i tags <head> inseriamo il seguente codice javascript:

<script type="text/javascript">

var delayb4scroll=2000 // definisce la pausa iniziale prima che inizi lo scorrimento del contenuto (1000 = 1 secondo)
var marqueespeed=2 // definisce la velocità di scorrimento (1 - 10)
var pauseit=1 // imposta la pausa al passaggio del mouse sul blocco (0 = no | 1 = si)

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee

</script>

Nel corpo del documento, tra i tags <body>, inseriamo il codice html del blocco:

<div id="marqueecontainer" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=marqueespeed">
<div id="vmarquee" style="position: absolute; width: 98%;">

<!-- INIZIO BLOCCO -->

Inserisci il contenuto quì

<!-- FINE BLOCCO -->

</div>
</div>


 
Links Correlati
· Indice Javascript
· Inoltre Javascript
· News by webmaster


Articolo più letto relativo a Javascript:
Reload automatico della pagina

Valutazione Articolo
Average Score: 5
Voti: 5


Please take a second and vote for this article:

Eccellente
Molto Buono
Buono
Regolare
Cattivo

Opzioni

 Pagina Stampabile Pagina Stampabile

Associated Topics

Javascript





Questo sito è ospitato gratuitamente da Altervista
Tutti i logos e i marchi presenti in questo sito sono dei loro proprietari.
I commenti sono proprietà  di chi li ha postati, tutto il resto © 2002 by Oceano Risorse per Webmasters
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Generazione pagina: 0.04 Secondi

Theme by

© Oceanoweb