46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
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 - 60,
|
|
left: e.pageX - 30,
|
|
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" });
|
|
} |