Código de JavaScript - Scroll de noticias en JavaScript y HTML5

Imágen de perfil

Scroll de noticias en JavaScript y HTML5gráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(10)
Actualizado el 26 de Mayo del 2016 por Xavi (Creado el 22 de Octubre del 2013)
13.683 visualizaciones desde el 22 de Octubre del 2013. Una media de 84 por semana
Simple código que muestra como crear un scroll de noticias para nuestra página web con JavaScript.

Versión 1
estrellaestrellaestrellaestrellaestrella(10)

Actualizado el 15 de Junio del 2016 (Creado el 22 de Octubre del 2013)gráfica de visualizaciones de la versión: Versión 1
13.684 visualizaciones desde el 22 de Octubre del 2013. Una media de 84 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puede ver un ejemplo en funcionamiento <a href="/codigo/archivos3/js_scroll.php" target="_blank" class="link2">aquí</a>
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
 
    <title>Ejemplo scroll de noticias</title>
 
    <style type="text/css">
        .scrollWrapper   {
            width:200px;height:300px;
            overflow:hidden;
            border:2px solid #00f;
            font-family:Arial;font-size:0.8em;
        }
        .scrollTitle {
            background-color:#00f;
            color:#fff;
            padding:5px;
            font-weight:bold;
            text-align:center;
        }
        #scroll    {
            position:relative;
            width:auto;
            margin:1px;
            z-index: -1;
            padding:5px;
        }
        #scroll .title  {font-weight:bold;margin-top:20px;}
    </style>
 
    <script type="text/javascript">
        // determina el numero de pixeles que se moveran las noticias para
        // cada iteracion en milisegundos de "speedjump"
        var scrollspeed=1;
        // determina la velocidad en milisgundos
        var speedjump=30;
        // segundos antes de empezar el movimiento
        var startdelay= 1;
        // posicion inicial superior en pixeles para cuando inicia
        var topspace=-10;
        // altura del marco donde se mostraran las noticias
        // Si se modifica la altura del contenedor de las noticas hay que
        // modificar tambien este valor
        var frameheight=270;
 
        // variable temporal que variara su valor en función de si estan las
        // noticias en movimiento o paradas
        current=scrollspeed;
 
        /**
         * Inicio del scroll
         * Esta función es llamada en el body de la pagina.
         * Tiene que recibir el id del scroll
         */
        function scrollStart()
        {
            dataobj = document.getElementById("scroll");
            // cogemos la altura maxima de la capa de las noticias
            alturaNoticias = dataobj.offsetHeight;
            // posicionamos la capa del scroll en su posicion inicial
            dataobj.style.top = topspace + 'px';
 
            setTimeout("scrolling()", (startdelay * 1000));
        }
 
        /**
         * Funcion que realiza el movimiento
         */
        function scrolling() {
            // Restamos a la propiedad top de la capa el valor en pixeles
            // establecido en la variable "scrollspeed", para hacer el
            // movimiento hacia arriba.
            dataobj.style.top = parseInt(dataobj.style.top) - scrollspeed + 'px';
            // Si la capa ha sobrepasado la altura del area por donde se muestran
            // las noticias ("alturaNoticias")
            if (parseInt(dataobj.style.top) < alturaNoticias * (-1))
            {
                // Posicionamos la capa en la parte inferior del recuadro, para
                // que simule que vienen las noticias de la parte inferior
                dataobj.style.top = frameheight + 'px';
                setTimeout("scrolling()", 0);
            }else{
                setTimeout("scrolling()", speedjump);
            }
        }
    </script>
</head>
 
<body onLoad="scrollStart();">
 
<h1>Ejemplo scroll de noticias</H1>
 
<div class="scrollWrapper" onMouseover="scrollspeed=0" onMouseout="scrollspeed=current">
    <div class="scrollTitle">Últimas Noticias</div>
    <div id="scroll" >
 
        <div class="title">Primera Noticia</div>
        <div class="content">Contenido de ejemplo para el scroll de noticias personalizable. En el contenido puedes añadir cualquier codigo HTML, incluidos enlaces <a href="http://www.lawebdelprogramador.com" target="_top">La Web del programador</a>
        </div>
 
        <div class="title">Segunda Noticia</div>
        <div class="content">Contenido de ejemplo para el scroll de noticias personalizable. En el contenido puedes añadir cualquier codigo HTML, incluidos enlaces <a href="http://www.lawebdelprogramador.com" target="_top">La Web del programador</a>
        </div>
 
        <div class="title">Tercera Noticia</div>
        <div class="content">Contenido de ejemplo para el scroll de noticias personalizable. En el contenido puedes añadir cualquier codigo HTML, incluidos enlaces <a href="http://www.lawebdelprogramador.com" target="_top">La Web del programador</a>
        </div>
 
    </div>
</div>
</body>
</html>



Comentarios sobre la versión: Versión 1 (10)

mario
17 de Diciembre del 2014
estrellaestrellaestrellaestrellaestrella
buen script pero tengo una duda por que no funcionan los href?
pero funcionan al quitarle el atributo de position
Responder
Óscar
15 de Enero del 2015
estrellaestrellaestrellaestrellaestrella
Como Indica mario, no funcionan los HREF, se debe de quitar el atributo de Position para que funcionen, pero entonces no funciona el Scroll.
Responder
rogar
08 de Agosto del 2015
estrellaestrellaestrellaestrellaestrella
ecelnte
Responder
Ariel
21 de Octubre del 2015
estrellaestrellaestrellaestrellaestrella
que seria esto que me da error en &#39;px';

dataobj.style.top = parseInt(dataobj.style.top) - scrollspeed + &#39;px';

Disculpen si es muy obvia pero soy nuevo en esto
Responder
daniel
11 de Noviembre del 2015
estrellaestrellaestrellaestrellaestrella
te falta una comilla hermano, fíjate esos errores siempre molestan y no te das cuenta
Responder
Guillermo
10 de Enero del 2016
estrellaestrellaestrellaestrellaestrella
daniel que ebo modificar para que funcione todo, disculpas pero soy muy principiante en el tema.
gracias
Responder
Guillermo
10 de Enero del 2016
estrellaestrellaestrellaestrellaestrella
Perdonen mi ignorancia pero que debo modificar para que funcione?
Responder
Arancha
26 de Mayo del 2016
estrellaestrellaestrellaestrellaestrella
debes modificar el codigo, donde te ponga:px';
debes cambiarlo por : 'px'; quitandole el &#39;
Responder
Imágen de perfil
Xavi
26 de Mayo del 2016
estrellaestrellaestrellaestrellaestrella
Gracias por comentarlo Arancha, ya lo he solucionado!!!
Responder
Tito
26 de Julio del 2016
estrellaestrellaestrellaestrellaestrella
Hola !. como podre hacer para cambiar el color del texto ?
Gracias !
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2516