Efecto tipo marqee o blink en capa

kaninox · #1 (**permalink**) 17/05/2011, 14:52

Hola muchachos tengo una consulta, tengo una capa en la cual muestro dos datos en un calendario, en uno es la fecha 18 por ejemplo y luego me gustaria que me mostrar el total de eventos para esa fecha "4 eventos", estos datos los obtengo de base de datos en una capa

<div>$valor - $valor2 eventos</div>

por decir algo

y me gustaria saber si es posible poner algun efecto que primero me muestre el $valor y luego pasado algunos segundos me muestre $valor2 eventos, ya sea como un marquee con tiempo, no se si me explico, digo muestre valor1 pase un tiempo 3 segundos haga el efecto marquee y valla cambiando a valor2 y asi sucesivamente o bien que haga un efecto fade entre cada paso me da igual, lo que pasa es que necesito mostrar ambos datos y los ambos se ven feos por espacio me gustaria implementar un efecto asi, sin complicarme con tanto codigo, alguna idea?

IsaBelM · #2 (**permalink**) 17/05/2011, 15:22

a ve si esto te da alguna idea. se trata de un rotador de imágenes con el efecto fade. aún le falta, pero te puede dar una idea

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#contenedor {
background: red;
width: 562px;
height: 320px;
border: 1px solid red;
}

#contenedor > div {
display: inline-block;
}

#botonera {
background: pink;
width: 40px;
height: 320px;
vertical-align: top;
}

#botonera p, #botonera p[class="inicio"] {
text-align: center;
margin: 5px 2px;
border: 1px solid yellow;
}

#botonera p {
background: orange;
cursor: pointer;
}

#botonera p[class="inicio"] {
background: red;
}

#contenedor2 {
width: 500px;
height: 320px;
}

#visor {
position: absolute;
background: #111;
z-index: -1;
width: 518px;
height: 320px;
}
</style>

<script type="text/javascript">
var url_vector = new Array();
var banner_vector = new Array();
var img_vector = new Array();

img_vector[0] = "img1.png";
img_vector[1] = "img2.png";
img_vector[2] = "img3.png";
img_vector[3] = "img4.png";

url_vector[0] = "http://www.url1.com";
url_vector[1] = "http://www.url2.com";
url_vector[2] = "http://www.url3.com";
url_vector[3] = "http://www.url4.com";

if(document.images){
for(var i = 0; i < img_vector.length; i++) {
banner_vector[i]=new Image();
banner_vector[i].src = img_vector[i];
}
}

var counter = 1;

function inicio() {
document.getElementById('visor').style.zIndex = -1;
temporizadorFadeIn = setInterval(fadeIn, 25);
}

var temporizadorFadeIn;
var temporizadorFadeOut;
var transparencia = 0;
var opacTotal = 70;
var temporizadorRotador;

function fadeIn() {
transparencia += 1;
transparencia = parseInt(transparencia);
var opacidad = transparencia /100;

if(document.getElementById('visor').style.zIndex == -1) {document.getElementById('visor').style.zIndex = 999;}

transparencia = (transparencia == opacTotal) ? opacTotal : transparencia;

if(transparencia == opacTotal) {

clearInterval(temporizadorFadeIn);
temporizadorFadeOut = setInterval(fadeOut, 25);
document.getElementById('img').src = banner_vector[counter % banner_vector.length].src;

document.getElementById("contenedor").getElementsB yTagName('a')[0].href = url_vector[counter % url_vector.length]

document.getElementById("botonera").getElementsByT agName('p')[counter % banner_vector.length].style.background="red";
if (counter >= 1) {
counter--;
document.getElementById("botonera").getElementsByT agName('p')[counter % banner_vector.length].style.background="orange";
counter++;
}
counter++;

}

var obj = document.getElementById('visor');

if (document.all){
obj.style.filter = 'alpha(opacity='+transparencia+')';
}else{
obj.style.MozOpacity = opacidad;
obj.style.opacity = opacidad;
obj.style.KHTMLOpacity = opacidad;
}
}

function fadeOut() {
transparencia -= 1;
transparencia = parseInt(transparencia);
var opacidad = transparencia /100;

transparencia = (transparencia == 0) ? 0 : transparencia;
if(transparencia == 0) {document.getElementById('visor').style.zIndex = -1; clearInterval(temporizadorFadeOut); }

var obj = document.getElementById('visor');

if (document.all){
obj.style.filter = 'alpha(opacity='+transparencia+')';
}else{
obj.style.MozOpacity = opacidad;
obj.style.opacity = opacidad;
obj.style.KHTMLOpacity = opacidad;
}
}

window.addEventListener('load', function() {
document.getElementById("contenedor").getElementsB yTagName('a')[0].href = url_vector[0];
document.getElementById("contenedor").getElementsB yTagName('img')[0].src = img_vector[0];
temporizadorRotador = setInterval(inicio, 5000);

var but = document.getElementById('botonera').getElementsByT agName('p');
for (var i = 0; i < but.length; i++) {
but[i].addEventListener('click', function() {

var elem_click = this.id.split('_')[1];
if (parseInt((elem_click*1)+1) == parseInt(counter % url_vector.length)) {return;}
clearInterval(temporizadorFadeIn);
clearInterval(temporizadorFadeOut);
clearInterval(temporizadorRotador);
counter = elem_click;
inicio();
temporizadorRotador = setInterval(inicio, 5000);}, false);

}

}
, false);
</script>
</head>
<body>
<div id="contenedor">
<div id="botonera"><p class="inicio" id="ban_0">bot1</p><p id="ban_1">bot2</p><p id="ban_2">bot3</p><p id="ban_3">bot4</p></div>
<div id="contenedor2">

<div id="visor"></div>
<a href=""><img src="" alt="" id="img" /></a>

</div>
</div>
</body>
</html>

p414 · #3 (**permalink**) 17/05/2011, 15:48

wow.... gracias por el codigo

kaninox · #4 (**permalink**) 17/05/2011, 16:40

Hola IsaBelM, lo había pensado de esa manera y de hecho he encontrado algunos javascript como http://news-scroller.vbarsan.com/ que funcionan pero como este calendario que cargo a su ves con php etc.. lo tengo dentro de un ajax no me ejecuta estos códigos, ya que cargo el calendario con php y dentro de este le hago conusltas por dia a lo que ademas a esto tendria que agregar estos javascript que se cargan en el head y no me sirven ya que todo esto deberia hacerce en la capa, pero le voy a dar unas vueltas a ver que sale.

Gracias

masterpuppet · #5 (**permalink**) 17/05/2011, 16:47

@kaninox, no estas trabajando con Prototype + Scriptaculous ?

kaninox · #6 (**permalink**) 18/05/2011, 08:14

si pero no encuentro nada que me haga un traspaso de información masterpuppet digo que me muestre un dato primero y luego otro? digo tiene que haber pero no he dado con ello.

masterpuppet · #7 (**permalink**) 18/05/2011, 09:00

A ver, que es exactamente lo que necesitas ?, un slider ?, un carrousel ?, podes postear algún link a alguno similar.

kaninox · #8 (**permalink**) 18/05/2011, 16:28

mira tengo en una capa dos datos que recogo de un calendario, entonces cada dia en el mes me genera una capa por decir asi con el valor del dia $valordia a este dia le hago una consulta y me traigo los eventos por ese dia fecha completa para no complicar tanto la cosa. tengo en una capa dos datos

<div>
$valor - $valor2
</div>

entonces mi idea era mostrar el dia $valor y al pasado unos segundos haga un fade o un marque hacia arriba abajo o al lado donde sea y me cambie al $valor2
y luego de unos segundos mismo efecto vuelva $valor o el dia no se si me explique.

no se se me ocurre pudiera ponerse una capa sobre otra tras pasar un tiempo :/ hacer un efecto marquee de un punto a otro que se yo :P estoy inventando cosas que no se como hacer XD, bueno cualquier ayuda es bienvenida.

Saludos

IsaBelM · #9 (**permalink**) 19/05/2011, 04:47

por darte otra opción. yo tengo hecho algo parecido a lo que te ocupara, pero en lugar de usar temporizadores, marquee, etc .... uso un paginador. de este modo el usuario sabe cuanto eventos están programados para ese día y la consulta es mas rápida

kaninox · #10 (**permalink**) 23/05/2011, 16:00

yo igual uso un paginador pero no insutu en el calendario, quiero lograr esto :

si se fijan en enumero 18 del mes hace el cambio que quiero que se vea ya sea con cualquier efecto, blink marquee etc...