-
Cómo crear un Javascript Ticker
-
los diseñadores de sitios Web a menudo utilizan teletipos cuando tienen que proporcionar una gran cantidad de información, pero están limitados en el espacio. Tickers emulan la forma en precios de pantallas de televisión de valores, resultados deportivos o noticias de última hora que en la parte inferior de la pantalla. JavaScript puede crear pantallas de cotización que se ejecutarán en la mayoría de los navegadores web modernos. Mediante el ajuste de la sincronización y el tamaño de los cambios de posición de texto, la información puede moverse suavemente y de manera uniforme en toda la pantalla.Instrucciones
1 Iniciar la aplicación editor estándar, texto sin formato que está disponible en su ordenador.
2 Introduzca el código siguiente en el editor de texto. Este es el estilo CSS que coloca el <div> que contiene el texto ticker - id = "interior" - dentro de un contenedor <div>. El texto de desbordamiento en el interior <div> se oculta y sólo es visible como el texto se desplaza a la izquierda.
<Html>
<HEAD><! - Info Styling establece un div withing un div contenedor. ->
<Style type = "text / css"> <! -interior {
position: relative;
left: 0px;
sobrecarga oculta;
altura: 1.1em;
}exterior{
altura: 1.25em;
padding: 1px;
margin-left: 4em;
sobrecarga oculta;
}-> </ Style>
</ HEAD><BODY>
<Div id = "externo">
<Div id = "interior"> </ div>
</ Div>3 Introduzca el código siguiente en el editor de texto debajo de la etiqueta final </ div>. Si aumenta el tamaño de la variable "intervalo de tiempo", va a ralentizar el ticker abajo. Si disminuye la variable "paso", la clave de pizarra se moverá más lento pero más suave. El aumento de "paso" hace que el tirón de pizarra a medida que avanza la izquierda en pasos más grandes.
<Script type = "text / javascript">
// Puede cambiar este mensaje a lo que te gustamessage = "Las licencias para la mayoría del software y otros trabajos prácticos están diseñados para eliminar su libertad de compartir y modificar las obras.";
messagelength = 0,5 * message.length;
// Esto cambia el texto que se muestra en el interior <div>
document.getElementById ( 'interior') innerHTML = mensaje.;
// Esto establece el ancho del interior <div> para más o menos 1/2 del tamaño del mensaje
document.getElementById ( 'interior') = style.width messagelength.toString () + 'em.';recuento var = 1;
compensado var = 1;
var intervalo de tiempo = 50;
paso var = 0,1;
// SetInterval () llama a la función de desplazamiento () en el tiempo establecido por intervalo de tiempo
setInterval ( "scroll ()", intervalo de tiempo);función de desplazamiento ()
{
offset = -count;
// Guarda el texto en el exterior <div>
. Document.getElementById ( 'interior') style.position = "relativo";// Mueve el texto a la izquierda cambiando la posición de propiedad CSS, "izquierda"
document.getElementById ( 'interior') = style.left offset.toString () + 'em.';// Este es el tamaño de la jugada del texto.
count = count + paso;
// Esta declaración se inicia el desplazamiento desde el principio
Si (recuento> messagelength)
{count=1;
}}
</ Script>
</ Body>
</ Html>4 Haga clic en el menú Archivo. Seleccionar la opción "Guardar". Guardar con el nombre de archivo "test.html".
5 Iniciar el navegador web que está disponible en su ordenador. Haga clic en la opción de menú "Archivo" y seleccionar "Abrir archivo".
6 Busque el archivo "test.html" acaba de crear, seleccionar con el ratón a continuación, haga clic en "Abrir".
7 Añadir el código a su página Web mediante la inserción de los estilos CSS entre las etiquetas <head> </ head> de la demo en la sección <head> de su página web. Eliminar el código de demostración entre las etiquetas <body> </ body> y colocarlos en la sección de su página web que desea la clave de pizarra para residir. Ajuste el ancho de la clave de pizarra interior y exterior <div> 's para que coincida con la cantidad de espacio que tiene para el ticker.
8 Guarde la página web y probarlo. Ajustar el tamaño de la clave de pizarra mediante el ajuste de los <div> anchuras y alturas. Ajustar la velocidad de desplazamiento cambiando las variables "paso" y "intervalo de tiempo".
Consejos y advertencias
- Los principales navegadores web muestran todos código JavaScript válida diferente. Algunos incluso contienen etiquetas HTML propietarias como por ejemplo <marquee> - una etiqueta que se ha incorporado en la funcionalidad clave de pizarra. etiquetas propietarias pueden no ser compatibles con todos los navegadores. Siempre probar el código en diferentes navegadores y versiones anteriores del mismo navegador con el fin de asegurarse de que su código funciona del modo deseado.
