Prima di proseguire...
Potrebbe interessarti la nostra collezione di esercizi C risolti?
Oggi vediamo uno script per visualizzare le news. La particolarità di questo script è che scorre una news per volta e quando il mouse ci passa sopra si blocca. Un esempio di questo script si trova nella home del sito
Le news vanno semplicemente inserite in una lista.
il codice è il seguente:
<html>
<head>
<title>news</title>
<style>
/*news*/
.news{
color:#F00;
height:130px;
text-align:center;
overflow:hidden;
}
.news li{
list-style:none;
position:relative;
top:130px;
display:none;
}
</style>
<script type="text/javascript" language="javascript1.5">
//INIZIO IMPOSTAZIONI
var velocita = 1;
//FINE IMPOSTAZIONI
var pos = 0;
var elemento_c = 0;
var stop = false;
function go_news(){
document.getElementById("news").getElementsByTagName("ul")[0].getElementsByTagName("li")[elemento_c].style.display = "block";
pos = ((document.getElementById("news").offsetHeight-document.getElementById("news").getElementsByTagName("ul")[0].getElementsByTagName("li")[elemento_c].offsetHeight*1.5-20)/2);
document.getElementById("news").getElementsByTagName("ul")[0].getElementsByTagName("li")[elemento_c].style.top = pos+"px";
news();
}
function news(){
if(!stop){
if(pos<=-((document.getElementById("news").getElementsByTagName("ul")[0].getElementsByTagName("li")[elemento_c].offsetHeight)+10)){
document.getElementById("news").getElementsByTagName("ul")[0].getElementsByTagName("li")[elemento_c].style.display = "none";
elemento_c++;
if(elemento_c < document.getElementById("news").getElementsByTagName("ul")[0].getElementsByTagName("li").length)
pos = (document.getElementById("news").offsetHeight-document.getElementById("news").getElementsByTagName("ul")[0].getElementsByTagName("li")[elemento_c].offsetHeight/2);
else
pos = (document.getElementById("news").offsetHeight-document.getElementById("news").getElementsByTagName("ul")[0].getElementsByTagName("li")[0].offsetHeight/2);
}else
document.getElementById("news").getElementsByTagName("ul")[0].getElementsByTagName("li")[elemento_c].style.display = "block";
if(elemento_c < document.getElementById("news").getElementsByTagName("ul")[0].getElementsByTagName("li").length){
pos -= 1*velocita;
document.getElementById("news").getElementsByTagName("ul")[0].getElementsByTagName("li")[elemento_c].style.top = pos+"px";
}else{
elemento_c = 0;
}
}
window.setTimeout(news,30/velocita);
}
</script>
</head>
<body onLoad="go_news();">
<h1>NEWS</h1>
<div id="news" class="news" onMouseOver="stop=true" onMouseOut="stop=false"><ul>
<li>news 1</li>
<li>news 2</li>
<li>news 3</li>
<li>news 4</li>
</ul>
</div>
</body>
</html>
Lo script è abbastanza semplice: come parametro prevede solo la velocità, che consiglio di lasciare ad 1. per i parametri grafici come l’altezza del box basta cambiare i valori nel css.Infatti nel javascript vado a vedere le grandezze impostate leggendo la proprietà offsetHeight. in seguito non faccio altro che mostrare l’elemento successivo e farlo scorrere, quando finisco con gli elementi ricomincio dall’inizio azzerando elemento_c.
Da notare che per una maggiore chiarezza all’utente finale la prima news viene visualizzata al centro.
animazione news by cardinale claudio is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.