<!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. spark与mapreduce的区别

    spark是通过借鉴Hadoop mapreduce发展而来,继承了其分布式并行计算的优点,并改进了mapreduce明显的缺陷,具体表现在以下几方面: 1.spark把中间计算结果存放在内存中,减少 ...

  2. 【Offer】[37] 【序列化二叉树】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 请实现两个函数,分别用来序列化和反序列化二叉树. 二叉树的序列化是指:把一棵二叉树按照某种遍历方式的结果以某种格式保存为字符串,从而使得 ...

  3. 题解 洛谷P1071【潜伏者】

    题目链接:https://www.luogu.org/problem/P1071 题意概括:给你一段原来截获的英文密码和与之对应的明文,如果密码表非F♂A法,输出"Failed"  ...

  4. java架构之路-（11）JVM的对象和堆

    上次博客,我们说了jvm运行时的内存模型,堆,栈,程序计数器,元空间和本地方法栈.我们主要说了堆和栈,栈的流程大致也说了一遍,同时我们知道堆是用来存对象的,分别年轻代和老年代.但是具体的堆是怎么来存放 ...

  5. docker-将自己的Linux打包为镜像

    基于原始文件和目录从0开始制作镜像: 1).基于CentOS7 Linux纯净系统(初始化安装完成),将Linux整个系统打包成tar文件即可: cd /root/ tar --numeric-own ...

  6. 实验吧CTF练习题---WEB---FALSE解析

    实验吧web之FALSE 地址:http://www.shiyanbar.com/ctf/1787 flag值:CTF{t3st_th3_Sha1}   解题步骤: 1.点开题目链接,观察题意 2.题 ...

  7. Net基础篇_学习笔记_第十天_方法_方法的练习

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. 装系统 ---------- 了解 UEFI与Legacy、硬盘分区MBR和GPT

    UEFI:全称“统一的可扩展固件接口”(Unified Extensible Firmware Interface),一种详细描述类型接口的标准.这种接口用于操作系统自动从预启动的操作环境,加载到一种 ...

  9. 【POJ - 3723 】Conscription（最小生成树）

    Conscription Descriptions 需要征募女兵N人,男兵M人. 每招募一个人需要花费10000美元. 如果已经招募的人中有一些关系亲密的人,那么可以少花一些钱. 给出若干男女之前的1 ...

  10. 【linux】【NodeJs】Centos7安装node-v10.16.3环境

    前言 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. https://node ...