var baba = document.querySelector('body');
baba.addEventListener('click', function (e) {
    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "hidden" });
    tianJia(e);
})

var erZi = [];
function tianJia (e) {
    var sunZi = document.createElement('div');
    sunZi.className = 'rabbit';
    // sunZi.innerHTML = '<i class="iconfont icon-tuzi"></i>';
    sunZi.innerHTML = '<img src="./images/xx.png" alt="">';
    baba.appendChild(sunZi);
    erZi.push({
        el: sunZi,
        top: e.pageY - 30,
        left: e.pageX - 20,
        opacity: 1,
        scale: 1,
        color: `rgb(${255 * Math.random()},${255 * Math.random()},${255 * Math.random()})`
    });
    move();
};
function move () {
    for (var i = 0; i < erZi.length; i++) {
        if (erZi[i].opacity <= 0) {
            baba.removeChild(erZi[i].el);
            erZi.splice(i, 1);
            return;
        }
        erZi[i].top--;
        erZi[i].opacity = erZi[i].opacity - 0.04;
        // erZi[i].scale = erZi[i].scale + 0.0001;
        erZi[i].el.style.cssText = `
            top: ${erZi[i].top}px;
            left: ${erZi[i].left}px;
            color: ${erZi[i].color};
            opacity: ${erZi[i].opacity};
            transform: scale(${erZi[i].scale});
            position: absolute;
            `

    }
    window.requestAnimationFrame(move);
    // $('body,html').css({ "width": "100%", "position": "relative", "overflow": "auto" });
}