<!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. andriod开发--使用Http的Get和Post方式与网络交互通信

    package com.example.a350773523.myapplication; import android.os.AsyncTask; import android.support.v7 ...

  2. hdu 1176免费馅饼（记忆化搜索）

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1176 题意不解释了 简单的记忆化搜索可以拿来练练手,注意要从pos = 5 开始搜索 #include ...

  3. codeforces 284 E. Coin Troubles（背包+思维）

    题目链接:http://codeforces.com/contest/284/problem/E 题意:n种类型的硬币,硬币的面值可能相同,现在要在满足一些限制条件下求出,用这些硬币构成t面值的方案数 ...

  4. eql框架。

    在刚进入公司的时候,在service层的框架用的是eql,是公司内的大佬封装的,作为一个小白,真的是折磨.公司内没有任何的文档,只能靠着自己一步一步的摸索. 后来用习惯了,发现这个框架确实有自己的独到 ...

  5. Event Loop js 事件循环初理解

    浏览器环境 执行栈 所有的 JS 代码在运行是都是在执行上下文中进行的.执行上下文是一个抽象的概念,JS 中有三种执行上下文: 全局执行上下文,默认的,在浏览器中是 window 对象 函数执行上下文 ...

  6. SpringBoot系列__01HelloWorld

    接触SpringBoot很久了,但是一直没有很深入的研究一下源码,最近重启了博客,顺便开始深入研究一下技术. 1.简介 参照官方文档的说法,SpringBoot的设计理念就是为了简化Java程序员搭建 ...

  7. Storm 系列（三）—— Storm 单机版本环境搭建

    1. 安装环境要求 you need to install Storm's dependencies on Nimbus and the worker machines. These are: Jav ...

  8. 渗透之路基础 -- 服务端请求伪造SSRF

    简介:SSRF 服务器端请求伪造,有的大型网站在web应用上提供了从其他服务器获取数据的功能.使用户指定的URL web应用获取图片,下载文件,读取文件内容.通常用于控制web进而探测内网服务以及攻击 ...

  9. airflow使用本地时区

    ​ 在airflow中使用的时间是utc时间,而更多时候我们希望的是使用本地时间,于是在定义airflow定时任务的时候,涉及到了时间的转换. 1.python中本地时间和utc时间的转换 查看国内可 ...

  10. 前端黑魔法：webworker动态化，无需JS文件创建worker

    前言 前几天,我和一位知乎网友讨论这个问题的时候,觉得这非常有意思,所以写了这篇文章作为记录 本文的思路和项目代码来源于知友 @simon3000,我加以修饰以更符合理解的需求.   本文所用代码已经 ...