JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

//PARAMETERS

//You can try messing with these but take care when increasing LEVELS and CHILDREN values ; a too big amount of generated elements will result in some serious slowdown and can eventually mess with the CSS transitions' display.

var LEVELS = 6;

var CHILDREN = 3;

var SHRINK_FACTOR = 1.7;

//RECURSIVELY GENERATE NESTED DIVS

function appendFractals(elem) {

if (typeof elem.fractal_level == "undefined") {

elem.fractal_level = LEVELS;

} else {

if (elem.fractal_level <= 0) {

return false;

}

}

elem.fractal_level--;

var e_W = elem.offsetWidth;

var e_H = elem.offsetHeight;

var children = 0;

while (children < CHILDREN) {

var ch = document.createElement('div');

ch.style.width = (e_W / SHRINK_FACTOR) + "px";

ch.style.height = (e_H / SHRINK_FACTOR) + "px";

ch.style.marginLeft = "-" + ((e_W / SHRINK_FACTOR) / 2) + "px";

ch.style.marginTop = "-" + ((e_H / SHRINK_FACTOR) / 2) + "px";

if (Math.random() >= 0.5) {

if (Math.random() >= 0.5) {

var chL = 0;

} else {

var chL = e_W;

}

var chT = Math.round(Math.random() * e_H);

} else {

if (Math.random() >= 0.5) {

var chT = 0;

} else {

var chT = e_H;

}

var chL = Math.round(Math.random() * e_W);

}

ch.style.left = (e_W / 2) + "px";

ch.style.top = (e_H / 2) + "px";

ch.InitialLeft = (e_W / 2) + "px";

ch.InitialTop = (e_H / 2) + "px";

ch.FractalLeft = chL + "px";

ch.FractalTop = chT + "px";

elem.appendChild(ch);

ch.fractal_level = elem.fractal_level;

appendFractals(ch);

children++;

}

setTimeout(function() {

moveFractals(document.getElementById('main'))

}, 1);

}

//UNFOLD

function moveFractals(elem) {

var all_F = elem.getElementsByTagName('div');

for (var i = 0; i < all_F.length; i++) {

all_F[i].style.top = all_F[i].FractalTop;

all_F[i].style.left = all_F[i].FractalLeft;

}

}

//RE-FOLD

function revertFractals(elem) {

var all_F = elem.getElementsByTagName('div');

for (var i = 0; i < all_F.length; i++) {

all_F[i].style.top = all_F[i].InitialTop;

all_F[i].style.left = all_F[i].InitialLeft;

}

}

function Fractals(elem) {

if (typeof elem.fractal_level != "undefined") {

revertFractals(elem);

var delay = 500;

} else {

var delay = 0;

}

setTimeout(function() {

elem.fractal_level = LEVELS;

elem.innerHTML = "";

appendFractals(elem);

}, delay);

}

document.onLoad = setTimeout(function() {

Fractals(document.getElementById('main'))

}, 500);