今天跟大家介绍一个JS的小效果，类似于一种烟花爆炸的效果，闲话不多说，先给大家看看效果图的截图吧。
1.png
2.png
大家可以看到，第一张图是一个div从屏幕下方升上来，然后到达鼠标点击的点上消失，然后看到第二张图的效果，有100（可以随意设置，不过最好不要太多，浏览器会卡）个小div从四面八方散开，然后就形成了类似于烟花爆炸的效果。
这个效果可以分成三步来做：
1.红色div从屏幕底部向上升起，到达鼠标的点击位置消失
2.100个小div分散
3.最后具体实现效果，超过屏幕的上下左右，小div消失
下面开始展示具体的代码：
document.onclick = function(e){
var e = window.event || e;//兼容
var x = e.clientX;//获取鼠标的X轴位置
var y = e.clientY;//获取鼠标的Y轴位置
var arrDiv = [];//创建空数组
var newDiv = document.createElement('div');//创建div
newDiv.style.width = '3px';
newDiv.style.height = '30px';
newDiv.style.position = 'absolute';
newDiv.style.background = 'red';
newDiv.style.left = x +'px';
newDiv.style.top = document.documentElement.clientHeight + 'px';//top值为可视屏幕的高度
document.body.appendChild(newDiv);
var time1 = setInterval(function(){
if(newDiv.offsetTop<=y){//当newDiv.offsetTop<=鼠标的点击Y轴位置
clearInterval(time1);
showDiv();
document.body.removeChild(newDiv);
}else{
newDiv.style.top = newDiv.offsetTop-30+'px';
}
},30);
function showDiv(){
for(var i = 0;i<100;i++){//创建100个小div
var newDid1 = document.createElement('div');
newDid1.style.position = 'absolute';
newDid1.style.width = '3px';
newDid1.style.height = '3px';
newDid1.style.background = '#'+Math.ceil(Math.random()0xEFFFFF+0x0FFFFF).toString(16);//颜色随机
newDid1.style.left = x + 'px';//div分散的起始X位置
newDid1.style.top = y + 'px';//div分散的起始Y位置
newDid1.speedX = Math.random()40-20;//小divX轴的速度20~-20
newDid1.speedY = Math.random()*40-20;//小divY轴的速度20~-20
document.body.appendChild(newDid1);
arrDiv.push(newDid1);//把小div插入到数组中
}
};
var time2 = setInterval(function(){
for(var j = 0;j<arrDiv.length;j++){//给每一个小div速度
arrDiv[j].style.left = arrDiv[j].offsetLeft + arrDiv[j].speedX + 'px';
arrDiv[j].style.top = arrDiv[j].offsetTop + arrDiv[j].speedY + 'px';
arrDiv[j].speedY +=1;
if(arrDiv[j].offsetLeft<0 || arrDiv[j].offsetLeft > document.documentElement.clientWidth || arrDiv[j].offsetTop<0 ||arrDiv[j].offsetTop>document.documentElement.clientHeight){//判断小div是否超出屏幕的上下左右,超出就删除
document.body.removeChild(arrDiv[j]);
arrDiv.splice(j,1);
}
}
},30);
}
网友评论