animazione news


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

news

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.

CC BY-SA 4.0 animazione news by cardinale claudio is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

Lascia un commento