animazione news

Pubblicato in animazioni javascript con tag animare animazione javascript news notizie singole visualizzare visualizzazione in da

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

news

Le news vanno semplicemente inserite in una lista.

il codice è il seguente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<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.

Ti è piaciuto il contenuto?

Guarda ORA la nostra collezione di esercizi C risolti

Lascia un commento