js放烟花

最新推荐文章于 2024-09-14 09:16:59 发布

九九七七

最新推荐文章于 2024-09-14 09:16:59 发布

阅读量396

点赞数 1

本文链接：https://blog.csdn.net/qq_54455551/article/details/124105237

版权

HTML JavaScript 动画效果交互设计烟花动画

关键词由CSDN通过智能技术生成

左键点击圆圈烟花，右键点击爆炸烟花

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>

    //方法封装
    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}
    }

效果图：