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

Imágen de perfil
Val: 2.019
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Scroll de noticias en JavaScript y HTML5gráfica de visualizaciones


JavaScript

Actualizado el 26 de Mayo del 2016 por Xavi (534 códigos) (Publicado el 22 de Octubre del 2013)
21.336 visualizaciones desde el 22 de Octubre del 2013
Simple código que muestra como crear un scroll de noticias para nuestra página web con JavaScript.

Versión 1
estrellaestrellaestrellaestrellaestrella(16)

Actualizado el 15 de Junio del 2016 (Publicado el 22 de Octubre del 2013)gráfica de visualizaciones de la versión: Versión 1
21.338 visualizaciones desde el 22 de Octubre del 2013
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 (16)

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
Daniel Stiven
2 de Febrero del 2019
estrellaestrellaestrellaestrellaestrella
si, tengo tambien ese problema. enconraste solucion
Responder
jose luis
25 de Octubre del 2019
estrellaestrellaestrellaestrellaestrella
Encontre una solucion en la web https://stackoverflow.com/questions/16961877/html-css-link-not-clickable.
z-index=9999999;
Con esto el codigo coge los <a href:
Y pregunto? porque.Y mira que he leido sobre el dichoso z-index pero aunque hablan de las capas en el plano Z no me aclaro el porque de ese valor.
Responder
jose luis
25 de Octubre del 2019
estrellaestrellaestrellaestrellaestrella
Me respondo a mi mismo, el z-index trata las capas de cada div, como lo que hace el codigo que por cierto es excelente para mi gusto es visualizar varias capas div atraves de javascript tienes que colocar el z-index con el numero mayor sobre el <div scroll> con esto se coloca este div el primero y asi no se solapan los href uno a otro.Bueno asi lo entiendo yo.Si alguien quiere aportar algo mas se agradece.
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
8 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
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
Jon
13 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
Hola! muy bueno el articulo!!
Solo una duda. Que habría que cambiar para que el movimiento fuera en horizontal en vez de en vertical?
Un saludo
Responder
Jon
13 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
Solucionado. Aquí sale como hacerlo.

http://www.dynamicdrive.com/forums/archive/index.php/t-183.html
Responder
Jors
5 de Agosto del 2017
estrellaestrellaestrellaestrellaestrella
Por que no hacéis alguna prueba haber si funciona con la nueva etiketa <panel style='overflow:scroll'>
Responder

Comentar la versión: Versión 1

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

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2516