Este JavaScript crea una carpa de desplazamiento en la que las imágenes se mueven horizontalmente a través del área de visualización. A medida que cada imagen desaparece a través de un lado del área de visualización, se vuelve a leer al comienzo de la serie de imágenes. Esto crea un desplazamiento continuo de imágenes en la carpa que recorre & amp; # x2014; siempre que tenga suficientes imágenes para llenar el ancho del área de visualización de la carpa.
Sin embargo, este script tiene algunas limitaciones:
Video destacado
- Las imágenes se muestran en el mismo tamaño (ancho y alto). Si las imágenes no son físicamente del mismo tamaño, todas serán redimensionadas. Esto puede resultar en una mala calidad de imagen, por lo que es mejor dimensionar constantemente sus imágenes de origen.
- La altura de las imágenes debe coincidir con la altura establecida para la carpa; de lo contrario, las imágenes se redimensionarán con el mismo potencial para las imágenes pobres mencionadas anteriormente.
- El ancho de imagen multiplicado por el número de imágenes debe ser mayor que el ancho de la carpa. La solución más fácil para esto si no hay suficientes imágenes es simplemente repetir las imágenes en la matriz para llenar el vacío.
- La única interacción que ofrece este script es detener el desplazamiento cuando el mouse se mueve sobre la carpa y reanudarse cuando el mouse se mueve fuera de la imagen.Más tarde describimos una modificación que se puede hacer para convertir todas las imágenes en enlaces.
- Si tiene varias carpas en una página, todas funcionan a la misma velocidad, por lo que el desplazamiento de cualquiera de ellas hará que todas dejen de moverse.
- Necesitas tus propias imágenes. Los ejemplos no son parte de este guión.
Código JavaScript de la marca de imagen
El primero, copie el siguiente JavaScript y guárdelo como & amp; amp; nbsp; marquee.js.
Este código contiene dos matrices de imágenes (para las dos carpas en la página de ejemplo), así como dos nuevos objetos mq que contienen la información que se mostrará en esas dos carpas.
Puede eliminar uno de esos objetos y cambiar el otro para mostrar una carpa continua en su página o repetir esas declaraciones para agregar aún más carpas.
La función mqRotate debe llamarse pasing & amp; # x200B; mqr después de que las carpas se definan como que manejarán las rotaciones.
var
& lt; br & gt ;
mqAry1 = [& amp; apos; graphics / img0.gif & amp; apos;, & amp; apos; graphics / img1.gif & amp; apos;, & amp; apos; graphics / img2.gif & amp; apos; & lt; br & gt ;
gráficos / img3.gif & amp; apos;, & amp; apos; graphics / img4.gif & amp; apos;, & amp; apos; graphics / img5.gif & amp; apos;, & amp; apos; graphics / & lt; br & gt ;
img6.gif&erio; apos;, & amp; apos; graphics/img7.gif&erio; apos;, & amp; apos; graphics/img8.gif&erio; apos;, & amp; apos; graphics/img9.gif& apos;, & lt; br & gt ;
& amp; apos; graphics / img10.gif & amp; apos;, & amp; apos; graphics / img11.gif & amp; apos;, & amp; apos; graphics / img12.gif & amp; apos;, & amp; apos; & lt; br & gt ;
gráficos / img13.gif & amp; apos;, & amp; apos; graphics / img14.gif & amp; apos;]; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt;
& lt; / br & gt ;
var & lt; br & gt ;
mqAry2 = [& amp; apos; graphics / img5.gif & amp; apos;, & amp; apos; graphics / img6.gif & amp; apos;, & amp; apos; graphics / img7.gif & amp; apos; & amp; apos; & lt; br & gt ;
gráficos / img8.gif & amp; apos;, & amp; apos; graphics / img9.gif & amp; apos;, & amp; apos; graphics / img10.gif & amp; apos; & amp; apos; graphics / & lt; br & gt;
img11.gif&erio; apos;, & amp; apos; graphics/img12.gif&erio; apos;, & amp; apos; graphics/img13.gif& apos;, & amp; apos; graphics / img14.& lt; br & gt ;
gif & amp; apos;, & amp; apos; graphics / img0.gif & amp; apos;, & amp; apos; graphics / img1.gif & amp; apos;, & amp; apos; graphics / img2.gif & amp; apos; & amp; apos; & lt; br & gt ;
gráficos / img3.gif & amp; apos;, & amp; apos; graphics / img4.gif & amp; apos;]; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt;
función start () {& lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; new mq (& amp; apos; m1 & amp; apos;, mqAry1,60); & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; new mq (& amp; apos; m2 & amp; apos;, mqAry2,60); // repetir para tantos campos de fusibles como sea necesario & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; mqRotate (mqr); // debe venir último & lt; br & gt ;
} & lt; br & gt ;
window.onload = start; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt;
// Marquesina de imagen continua & lt; br & gt ;
// derechos de autor 24 de julio de 2008 por Stephen Chapman & lt; br & gt ;
// http://javascript.about.com
// se otorga permiso para usar este Javascript en su página web & lt; br & gt ;
// proporcionó que todo el código a continuación en este script (incluidos estos & lt; br & gt ;
// comentarios) se usa sin ninguna alteración & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; / br & gt;
var
& lt; br & gt ;
mqr = []; función & lt; br & gt ;
mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit = & lt; br & gt ;
this.mqo.style.height; this.mqo.onmouseout = function () & lt; br & gt ;
{mqRotate (mqr);}; this.mqo.onmouseover = function () & lt; br & gt ;
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = ary.length; & lt; br & gt ;
para (var & lt; br & gt ;
i = 0; i
this.mqo.ary [i] .src = ary [i]; this.mqo.ary [i] .style.position = & lt; br & gt ;
& amp; apos; absolute & amp; apos ;; this.mqo.ary [i] .style.left = (wid * i) + & amp; apos; px & amp; apos ;; & lt; br & gt ;
this.mqo.ary [i] .style.width = wid + & amp; apos; px & amp; apos ;; this.mqo.ary [i] .style.height = & lt; br & gt ;
heit this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);} & lt; br & gt ;
función mqRotate (mqr) {if (!mqr) retorno; para (var j = mqr.length – 1; j & lt; br & gt ;
& amp; gt; -1; j–) {maxa = mqr [j] .ary.length; para (var i = 0; imqr [j] .ary [i] .style; & amp; amp; nbsp; x.left = (parseInt (x.left, 10) -1) + & amp; px & amp; y amp; y & amp; y
mqr [j] .ary [0] .style; if (parseInt (y.left, 10) + parseInt (y.width, 10) & amp; lt; 0) & lt; br & gt ;
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) + & lt; br & gt ;
parseInt (z.style.width) * maxa) + & amp; apos; px & amp; apos ;; mqr [j] .ary.push (z);}} & lt; br & gt ;
mqr [0] .TO = setTimeout (& amp; apos; mqRotate (mqr) & amp; apos;, 10);} & lt; / br & gt; & lt; / br & gt; & br & gt; & lt; / br & gt; & lt; / br & gt; & gt;
& lt; / br & gt ;
A continuación, agregue el siguiente código en la sección principal de su página:
Agregue un comando de hoja de estilo
Necesitamos agregar un comando de hoja de estilo para definir cómo se verá cada una de nuestras carpas.
Aquí y amp; apos; s el código que usamos para los de la página de ejemplo:
.marquee {posición: relativa; & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; & amp; amp; nbsp; desbordamiento: oculto; & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; & amp; amp; nbsp; ancho: 500px; & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; & amp; amp; nbsp; altura: 60px; & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; & amp; amp; nbsp; border: negro sólido 1px; & lt; br & gt ;
& amp; amp; nbsp; & amp; amp; nbsp; & amp; amp; nbsp;} & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt;
Puede cambiar cualquiera de estas propiedades para su carpa; sin embargo, debe permanecer & amp; amp; nbsp; posición: relativa .& amp; amp; nbsp;
Puede colocarlo en su hoja de estilo externo si tiene una o encerrarla entre & amp; amp; nbsp; & amp; amp; nbsp; tags en la parte superior de su página.
Defina dónde colocará la carpa
El siguiente paso es definir un div en su página web donde colocará la carpa de imágenes.
La primera de las carpas de ejemplo utilizó este código:
& lt; fuerte / & gt ;
& lt; p / & gt ;
La clase asocia esto con el código de la hoja de estilo, mientras que la identificación es lo que usaremos en la nueva llamada mq () para adjuntar la carpa de imágenes.
Asegúrese de que su código contenga los valores correctos
Lo último que debe hacer para armar todo esto es asegurarse de que su código para agregar el objeto mq en su JavaScript después de que la página se cargue contenga los valores correctos.
Here & amp; apos; s cómo se ve una de las declaraciones de ejemplo:
nuevo mq (& amp; apos; m1 & amp; apos;, mqAry1,60);
- El m1 es la identificación de nuestra etiqueta div que mostrará la carpa.
- mqAry1 es una referencia a una matriz de imágenes que se mostrarán en la carpa.
- El valor final 60 es el ancho de nuestras imágenes (las imágenes se desplazarán de derecha a izquierda y, por lo tanto, la altura es la misma que definimos en la hoja de estilo).
Para agregar carpas adicionales, simplemente configuramos matrices de imágenes adicionales, divs adicionales en nuestro HTML, posiblemente configuramos clases adicionales para diseñar las carpas de manera diferente y agregar tantas declaraciones nuevas de mq () como tengamos carpas. Solo necesitamos asegurarnos de que la llamada mqRotate () los siga para operar las carpas para nosotros.
Hacer imágenes de carpa en enlaces
Solo hay dos cambios que debe realizar para convertir las imágenes en la carpa en enlaces.
Primero, cambie su matriz de imágenes de una matriz de imágenes a una matriz de matrices donde cada una de las matrices internas consiste en una imagen en la posición 0 y la dirección del enlace en la posición 1.
var mqAry1 = [& lt; br & gt ;
[& amp; apos; graphics / img0.gif & amp; apos;, & amp; apos; blcmarquee1.htm & amp; apos;], & lt; br & gt ;
[& amp; apos; graphics / img1.gif & amp; apos;, & amp; apos; blclockm1.htm & amp; apos;],…& lt; br & gt ;
[& amp; apos; graphics / img14.gif & amp; apos;, & amp; apos; bltypewriter.htm & amp; apos;]]; & lt; / br & gt; & lt; / br & gt; & lt; / br & gt;
Lo segundo que debe hacer es sustituir lo siguiente por la parte principal del script:
// Marquesina de imagen continua con enlaces & lt; br & gt ;
// derechos de autor 21 de septiembre de 2008 por Stephen Chapman & lt; br & gt ;
// http://javascript.about.com
// se otorga permiso para usar este Javascript en su página web & lt; br & gt ;
// proporcionó que todo el código a continuación en este script (incluidos estos & lt; br & gt ;
// comentarios) se usa sin ninguna alteración & lt; br & gt ;
var mqr = []; función mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit = this.mqo.style.height; this.mqo.onmouseout = function () {mqr);}; this.mqousec
El resto de lo que necesita hacer sigue siendo el mismo que se describe para la versión de la carpa sin los enlaces.
& amp; # x203A; Informática}
