<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #container{

            width: 80%;

            height: 600px;

            border: 2px solid red;

            background: #000;

            margin:20px auto;

            cursor: pointer;

            position: relative;

            left: 0;

            top: 0;

            overflow: hidden;

        }

        .fire{

            width: 10px;

            height:10px;

            position: absolute;

            bottom: 0;

        }

        .small-fire{

            width: 10px;

            height:10px;

            position: absolute;

            border-radius: 50%;

        }

    </style>

</head>

<body>

    <div id="container"></div>

</body>

<script src="../move.js"></script>

<script>

    function Fire(options){

        this.x = options.x;

        this.y = options.y;

        this.cont = options.parent;

        // 1.创建主体烟花，设置样式，位置

        this.init()

    }

    Fire.prototype.init = function(){

        // 主体烟花，设置样式，位置

        this.ele = document.createElement("div");

        this.ele.className = "fire";

        this.ele.style.left = this.x + "px";

        this.ele.style.background = randomColor();

        this.cont.appendChild(this.ele)

        // 2.开始运动，运动结束

        this.animate()

    }

    Fire.prototype.animate = function(){

        // 开始运动。。。

        move(this.ele,{

            top:this.y

        },function(){

            // 删除主体烟花

            this.ele.remove()

            // 3.创建小烟花

            this.createSmall()

        }.bind(this))

    }

    Fire.prototype.createSmall = function(){

        // 创建小烟花,运动，删掉

        var num = random(10,20);

        // 1.随机的半径

        var r = random(100,200);

        console.log(num)

        for(var i=0;i<num;i++){

            let div = document.createElement("div");

            div.className = "small-fire";

            div.style.background = randomColor();

            div.style.left = this.x + "px";

            div.style.top = this.y + "px";

            div.setAttribute("i",i);

            this.cont.appendChild(div);

            // 2.利用三角函数，计算出一个圆上面平均分布的点的坐标

            // 注意三角函数的方法接收的是弧度：别忘记角度转弧度

            var l = parseInt(Math.cos( Math.PI/180 * (360/num * i)) * r) + this.x;

            var t = parseInt(Math.sin( Math.PI/180 * (360/num * i)) * r) + this.y;

            move(div,{

                left:l,

                top:t

            },function(){

                div.remove()

            })

        }

    }

    // for(){

    //     ali[i] = i

    //     ali[i].onclick = function(){

    //         this

    //     }

    // }

// 范围随机数

function random(max,min){

    return Math.round(Math.random()*(max-min)+min);

}

// 随机颜色

function randomColor(){

    return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";

}

    var ocont = document.getElementById("container");

    ocont.onclick = function(eve){

        var e = eve || window.event;

        new Fire({

            x:e.offsetX,

            y:e.offsetY,

            parent:this

        });

    }

</script>

</html>
//移动
function move(ele,json,callback){

    clearInterval(ele.t);

    ele.t = setInterval(() => {

        var onoff = true;

        for(var i in json){

            var iNow = parseInt(getStyle(ele,i));

            var speed = (json[i] - iNow)/6;

            speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);

            if(iNow != json[i]){

                onoff = false;

            }

            ele.style[i] = iNow + speed + "px";

        }

        if(onoff){

            clearInterval(ele.t);

            callback && callback();

        }

    }, 30);

}

function getStyle(ele,attr){

    if(ele.currentStyle){

        return ele.currentStyle[attr];

    }else{

        return getComputedStyle(ele,false)[attr];

    }

}

js实现烟花效果的更多相关文章

  1. js制作烟花效果

    <html> <head> <link type="text/css" rel="stylesheet" href="c ...

  2. 『HTML5梦幻之旅』-缤纷多姿的烟花效果

    天花无数月中开,五采祥云绕绛台.堕地忽惊星彩散,飞空旋作雨声来.怒撞玉斗翻晴雪,勇踏金轮起疾雷.更漏已深人渐散,闹竿挑得彩灯回. ——明·瞿佑·<烟火戏> 记得每年过春节的那段时间,除了欣 ...

  3. WEB烟花效果——Canvas实现

    摘要        本文主要介绍一种WEB形式的烟花(fireworks)效果(图1所示),该效果基于Canvas实现,巧妙地运用了canvas绘图的特性,并加入了物理力作用的模拟,使整体效果非常绚丽 ...

  4. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  5. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  6. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  8. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  9. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

随机推荐

  1. Error executing DDL via JDBC Statement 导致原因之一:列名使用了sql关键字

    WARN: GenerationTarget encountered exception accepting command : Error executing DDL via JDBC Statem ...

  2. 【入门】广电行业DNS、DHCP解决方案详解（三）——DNS部署架构及案

    [入门]广电行业DNS.DHCP解决方案详解(三)——DNS部署架构及案 DNS系统部署架构 宽带业务DNS架构 互动业务DNS架构 案例介绍 案例一 案例二 本篇我们将先介绍DNS系统部署架构体系, ...

  3. 基于STM32F429的TFT0.96屏幕驱动

    1.介绍TFT 2.Cube配置  该屏幕是用SPI通信的,但没有MISO引脚,意思是说该屏幕只能接收数据,但无法读取里面的数据,理论上说四线就能启动,但我弄不出,只能用六线. 在Cube上只要开启六 ...

  4. Java，哈希码以及equals和==的区别

    从开始学习Java,哈希码以及equals和==的区别就一直困扰着我. 要想明白equals和==的区别首先应该了解什么是哈希码,因为在jdk的类库中不管是object实现的equals()方法还是S ...

  5. NameNode数据存储

    HDFS架构图 HDFS原理 1)  三大组件 NameNode. DataNode .SecondaryNameNode 2)NameNode 存储元数据(文件名.创建时间.大小.权限.文件与blo ...

  6. InnoDB在MySQL默认隔离级别下解决幻读

    1.结论 在RR的隔离级别下,Innodb使用MVVC和next-key locks解决幻读,MVVC解决的是普通读(快照读)的幻读,next-key locks解决的是当前读情况下的幻读. 2.幻读 ...

  7. springboot使用 @EnableScheduling、@Scheduled开启定时任务

    1.在main启动项添加一个注解@EnableScheduling package com.example.springmybatis; import org.mybatis.spring.annot ...

  8. oracle用imp导入dmp文件

    oracle命令行登录 sqlplus 用户名/密码 创建用户 create user 用户 identified by 密码 ; 创建表空间 create tablespace 表空间名 dataf ...

  9. 在VMware中就显示lo回环IP：127.0.0.1的解决办法。

    在VMware时由于某些原因导致,在使用ifconfig只会显示lo,不显示其他的东西 步骤:1.sudo lshw -numeric -class network 2.sudo route -nv ...

  10. 体验一下：AndroidX

    背景 今天在更新 ButterKnife 到最新版本的时候出现了一个问题,我引入的是 10.1.0 最新版本: implementation 'com.jakewharton:butterknife: ...