logoExtra: script.burbujas_de_colores

Descripción: Creación aleatoria de burbujas de colores que usaremos como fondo de un recuadro.


A continuación mostramos los apuntes asociados a este extra:

Burbujas de colores
Vamos a crear el efecto de burbujas de colores de fondo del recuadro adjunto.
// Descripción para sindicación
/*
    [rss]Creación aleatoria de burbujas de colores que usaremos como fondo de un recuadro.[/rss]
*/
//<![CDATA[
var ancho_max, alto_max, primer_tag, radio_max;
var burbujillas = 0;
valores_hexa = "0123456789ABCDEF";
function color_aleatorio()    {
    return    valores_hexa.charAt(Math.floor(Math.random() * 16)) +
        valores_hexa.charAt(Math.floor(Math.random() * 16)) +
        valores_hexa.charAt(Math.floor(Math.random() * 16)) +
        valores_hexa.charAt(Math.floor(Math.random() * 16)) +
        valores_hexa.charAt(Math.floor(Math.random() * 16)) +
        valores_hexa.charAt(Math.floor(Math.random() * 16));
}

function burbujear()    {
    color_burbuja = color_aleatorio();
    radio_burbuja = 10 + Math.floor(Math.random() * (radio_max - 10));
    diametro_burbuja = radio_burbuja * 2 + 1;
    burbuja = document.createElement("img");
    url = "diario.jocker.php?extra=pngshape&shape=circle&borde=000000&relleno=" + color_burbuja;
    url += "&ancho=" + diametro_burbuja;
    url += "&alto=" + diametro_burbuja;
    url += "&coors=" + radio_burbuja;
    url += "," + radio_burbuja;
    url += "," + radio_burbuja;
    burbuja.src = url;
    burbuja.style.position = "absolute";
    burbuja.style.opacity = ".1";
    sup = (Math.floor(Math.random() * (alto_max + radio_burbuja)) - radio_burbuja) + "px";
    burbuja.style.top = sup;
    izq = (Math.floor(Math.random() * (ancho_max + radio_burbuja)) - radio_burbuja) + "px";
    burbuja.style.left = izq;

    tag("capa_burbujas").insertBefore(burbuja, tag("primera_capa_burbujas"));
    tag("n_burbujas").innerHTML = ++burbujillas;
    if (burbujillas < 20) setTimeout(burbujear, 2500);
}

function inicio_burbujeo()    {
    ancho_max = 300;//document.body.clientWidth;
    alto_max = 300;//document.body.clientHeight;
    radio_ancho = parseInt(ancho_max / 2);
    radio_alto = parseInt(alto_max / 2);
    radio_max = (radio_ancho > radio_alto) ? radio_alto : radio_ancho;
    //primer_tag = document.body.firstChild;
    burbujear();
}

poner_evento(window, "load", inicio_burbujeo);
//]]>

Este código ha sido leído en 103 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.script.burbujas_de_colores) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024 | Otros enlaces: buscador