Un bonito efecto para tu pagina web, burbujas que flotan hasta desaparecer en el marco superior. Puedes cambiar la imágen por otra si quieres, la que está por defecto es esta:
Qué editar: La direccion de la imágen la puedes cambiar por la que quieras, la direccion de esta burbuja, es http://img525.imageshack.us/img525/633/bubblewin2av4.png
Numero de burbujas que aparecerán:
var no= 15;
Para agregar nuevas imágenes, solo tienes que insertar una nueva línea y aumentar el número que hay entre los corchetes []
snow[0] = "http://..."
snow[1] = "http://..."
snow[2] = "http://..."
snow[3] = "http://..."
snow[4] = "http://..."
snow[5] = "http://..."
[Código Actualizado] El siguiente codigo lo debes pegar antes de </body>
<script language="JavaScript1.2">
<!-- Begin
var no = 15; // cantidad de imágenes
var speed = 2; // Velocidad de desplazamiento de las imágenes
var snow = new Array();
snow[0] = "http://img525.imageshack.us/img525/633/bubblewin2av4.png"
snow[1] = "http://img525.imageshack.us/img525/633/bubblewin2av4.png"
snow[2] = "http://img525.imageshack.us/img525/633/bubblewin2av4.png"
var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 1800;
if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} } else if (ie4up||ns6up) { if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
}
}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}
function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i]; if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight; }
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i]+pageYOffset;
document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}
function snowIE_NS6() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", speed);
}
if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
// End -->
</script>
03 octubre 2007
Categorias: Codigos y Recursos, Efectos
Entradas populares
- Servidor de radio streaming Gratis con Listen2myRadio
- Efecto lluvia de estrellas con Javascript
- Cuenta regresiva para año nuevo!
- Coronavirus: Juegos para pasar el tiempo en cuarentena con tus hijos
- Lección 2: Insertar Textos
- Reproductor flash para ShoutCast de Radio
- Lección 6: Insertar Imágenes en mi Página Web
- Cómo crear una página web simple y gratis en menos de 5 minutos (2021)
- Como hacer un libro de visitas (Guestbook)
- Cómo descargar videos de YouTube en HD o canciones en mp3 facilmente
21 comentarios:
hola mi nombre es manuel y me intereso el tema de la burbujas. he intentado probarlo pero no me funciono.
copio todo esl scrip (esta todo como comentado tengo que sacarle todos los comentarios??). capaz tengo el error en donde hay
qué editar: Donde dice: bubble.gif pones la direccion de la imágen que quieras, para la burbuja, es http://img525.imageshack.us/img525/633/bubblewin2av4.png. esto lo tengo q poner como dice aca o puedo poner el nombre del archivo de la imagen de la burbuja??
mi correo es manalesan@htmail.com
cualquie cosa agregame al msn y hablamos.
saludos
en bubble.gif va la direccion de la imagen, si quieres la misma imagen pones esa direccion.
En todo caso te responderè al mail ^^
ok si me escribes al correo mejor. ya prove de todos modos y no pasa nada.
1- cuando copio el codigo en dreamweaver entre el body me aparece todo en gris como si estaria todo comentado. eso queda asi.
2- cambie bubble.gif por la direccion de la imagen y tampoco funciono.
espero tu respuesta te paso el correo nuevamente o agregame al msn.
manalesan@hotmail.com
El codigo estaba funcionando mal por cosas de blogger, ahora esta perfecto, es cosa de copiar y pegar
saludos!
Hola, soy Alejandro y lo he puesto en mi blog, pero he visto que solo funciona con Internet Explorer, en cambio, con Firefox y Safari no funcionan. ¿Habría alguna solución a esto?
Debe ser problema de blogger porque a mi me funciona perfectamente en IE, firefox, Opera y Flock.
hola ¿se puede hacer que sean copos de nieve y caigan para abajo?
gracias
kantepushe, para que nieve en tu blog quizá te interese mirar AQUÍ
Muchísimas gracias.
hola a todos amigos esta es una noticia de ultima hora pronto llegara a la internet uno de los blog mejor actualizado del año donde podran ver mucha informacion sobre ayudas para blogger y otros blog, este blog esta muy bien organizado con muchas imagenes fotos entre otras cosas muy pronto hara su aparicion mundial en toda la internet todos podran entrar y ver tan grande avance muchas gracias y que esten bien ok....
:O!
Hola, hay alguna manera de que se vean las burbujas pasar sobre un .swf , las veo pasar por detras, gracias
ooo, muchisimas gracias
mmmm
este no me funciono lo pege en mi pag web y no paso nada.
y tengo el internet explorer
no sucede nada, creo que hay algo malo en el codigo o quizas el lugar donde se debe pegar esta mal indicado...
El código esta bien, tal vez el problema sea su tipo de página, como blogger, wordpress, etc
Ya que en esos Cms no se pone normalmente.
no se me ven las burbujas , sale la x d la imagen flotando.
huau este efecto de las burbujas me latio mas que los otros que e visto en esta misma pagina me latio esta chido
muuchiisimas gracias nose si te importara que haya puesto un tuto en mi blog!! para que todo el mundo sepa!!! cosas!!!
que tal? para que les funcione deben quitar esto de la parte superior de su html:
no salio lo que queria poner, me referia a esto:
DOCTYPE html PUBLIC hasta... aca:/DTD/xhtml1-transitional.dtd
Publicar un comentario
Gracias por visitar Creando Web, si tienes alguna duda, solo pregunta! ^^
- He activado la moderación de comentarios por el spam :)