左键点击圆圈烟花，右键点击爆炸烟花
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 10px;
height: 10px;
position: absolute;
border-radius: 50%;
}
html,body{
height: 100%;
overflow: hidden;
background-color: black;
}
</style>
</head>
<body>
<script src="./js/animatedPlus.js"></script>
<script>
// body点击事件
document.body.onclick = function(e){
e = e || window.event
// 创建div，确定位置，鼠标的坐标(烟花要移动到的位置，爆炸)
let mouseX = e.clientX
let mouseY = e.clientY
let box = createDiv(mouseX,window.innerHeight)
document.body.appendChild(box)
// div上升，到鼠标坐标回调删除
animated(box,{"top":mouseY},20,function(){
box.remove()
// 烟花爆炸的碎片个数
let count = rangeRandom(20,24)
// 烟花半径
let r = rangeRandom(100,200)
let frg = document.createDocumentFragment()
for(let i = 1;i<=count;i++){
let div = createDiv(mouseX,mouseY)
frg.appendChild(div)
// 获取到每一个烟花碎片的目标位置
let targetX = Math.ceil(Math.sin(Math.PI*2/count*i)*r+parseFloat(div.style.left))
let targetY = Math.ceil(Math.cos(Math.PI*2/count*i)*r+parseFloat(div.style.top))
animated(div,{"left":targetX,"top":targetY,"opacity":0.2},20,function(){
div.remove()
})
}
document.body.appendChild(frg)
})
}
document.body.oncontextmenu = function(e){
e = e || window.event
e.preventDefault()
// 底部生成一个div 颜色随机 x轴，鼠标点击
let mouseX = e.clientX
let mouseY = e.clientY
let div = createDiv(mouseX,window.innerHeight)
document.body.appendChild(div)
// div运动到鼠标点击的位置 清除原本的div
animated(div,{"top":e.clientY},20,function(e){
// 回调生成更多的div 颜色随机，抛物线运动
div.remove()
e = e || window.event
// 烟花碎片
let count = rangeRandom(30,50)
let frg = document.createDocumentFragment()
// 运动
for(let i = 0;i<count;i++){
let div = createDiv(mouseX,mouseY)
frg.appendChild(div)
// 四个象限 数值就是爆炸的范围
// let arr = [{x:rangeRandom(-20,-1),y:rangeRandom(1,20)},
// {x:rangeRandom(1,20),y:rangeRandom(1,20)},
// {x:rangeRandom(-20,-1),y:rangeRandom(-20,-1)},
// {x:rangeRandom(1,20),y:rangeRandom(-20,-1)}]
// let stepPoint = arr[rangeRandom(0,3)]
// 象限等价于
let x = rangeRandom(0,1)==0?rangeRandom(-20,-1):rangeRandom(20,1)
let y = rangeRandom(0,1)==0?rangeRandom(-20,-1):rangeRandom(20,1)
let stepPoint = {x,y}
let stepY = stepPoint.y
let timer = setInterval(()=>{
let currentX = parseFloat(div.style.left)
let currentY = parseFloat(getStyle(div,"top"))
stepY++
div.style.top = currentY + stepY + "px"
div.style.left = currentX + stepPoint.x + "px"
// 回调生成的div到达0或者达到屏幕宽度高度，停止运动
if(currentX<=0 || currentX>=window.innerWidth ||currentY<=0 || currentY>=window.innerHeight){
clearInterval(timer)
div.remove()
}
},20)
}
document.body.appendChild(frg)
},40)
}
// 生成多个div，运动
function rangeRandom(number1,number2){
var max = Math.max(number1, number2)
var min = Math.min(number1, number2)
var range = Math.floor(Math.random() * (max - min + 1) + min)
return range
}
function rangeColor(number1,number2){
let r = rangeRandom(number1,number2)
let g = rangeRandom(number1,number2)
let b = rangeRandom(number1,number2)
return `rgb(${r},${g},${b})`
}
function createDiv(x,y){
let div = document.createElement("div")
div.className = "box"
div.style.backgroundColor = rangeColor(0,255)
div.style.left = x + "px"
div.style.top = y + "px"
return div
}
</script>
</body>
</html>js
//方法封装
function animated(element,targetObject,speed = 0,callback){//element 变化的元素 传入目标对象 targetObject callback 回调函数
clearInterval(element.timer)
if(typeof speed != "number"){
speed = Number(speed)
if(isNaN(speed)){
speed = 0
}
}
//遍历目标对象 查看里面需要变化的内容 {"width":100,"height":100,opacity":1,"zIndex":1}
element.timer = setInterval(()=>{
let flag = true
for(let key in targetObject){
let current = parseFloat(getStyle(element,key))
let step = 0
//判断传进来的值
if(key=="opacity"){
//不需要px作为单位
//目标元素 targetObject[key] 当前的值 Number(getStyle(element,key)) 步长
// if((targetObject[key]*100-current*100)>0){
// step = 0.004
// }else{
// step = -0.004
// }
step = (targetObject[key] * 100 - current * 100) / 10 //保证最终达到1
step = (step > 0 ? Math.ceil(step) : Math.floor(step)) / 100
element.style[key] = current + step
}
if(key=="zIndex"){//如果是层高 直接设置
element.style[key] = targetObject[key]
}
if(key!="opacity" && key!="zIndex"){ //height width left top
step = (targetObject[key]-current)/10>0?Math.ceil((targetObject[key]-current)/10):Math.floor((targetObject[key]-current)/10)
element.style[key] = current+step+'px'
}
if(parseFloat(getStyle(element,key))!=targetObject[key]){//如果某个没有设置完
flag = false
}
}
if(flag){
clearInterval(element.timer)
//执行对应的callback
if(typeof callback =='function'){//如果你是个函数
//执行这个函数
callback()
}
}
},speed)
//callback是所有的这个函数里面所有的事情做完以后做的事情
}
//获取样式的值
function getStyle(element,attr){ //需要获取样式的对象 样式的名字
// window.getComputedStyle(element,null)[attr]
// element.currentStyle ie的兼容写法
//获取样式对象
var style = window.getComputedStyle?window.getComputedStyle(element,null):element.currentStyle
return style[attr]
}
// 封装一个方法 用于获取滚动栏离顶部的距离和离最左距离
function myScoll(){
//如果没有滚动栏
if(window.pageYOffset!=null){
return {"left":window.pageXOffset,"top":window.pageYOffset}
}
//获取top值
let top = document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop
//获取left值
let left = document.body.scrollLeft?document.body.scrollLeft:document.documentElement.scrollLeft
//再返回
return {left,top}
}
效果图：
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
