<!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. Atcoder E - RGB Sequence（dp）

    题目链接:http://arc074.contest.atcoder.jp/tasks/arc074_c 题意:一共有3种颜色,红色,绿色,蓝色.给出m个要求l,r,x表示在区间[l,r]内要有x种不 ...

  2. CF990C Bracket Sequences Concatenation Problem 思维 第五道 括号经典处理题目

     Bracket Sequences Concatenation Problem time limit per test 2 seconds memory limit per test 256 meg ...

  3. 天梯杯 PAT L2-013 红色警报

    战争中保持各个城市间的连通性非常重要.本题要求你编写一个报警程序,当失去一个城市导致国家被分裂为多个无法连通的区域时,就发出红色警报.注意:若该国本来就不完全连通,是分裂的k个区域,而失去一个城市并不 ...

  4. 【Offer】[68] 【树中两个结点的最低公共祖先】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入两个树结点,求它们的最低公共祖先. [牛客网刷题地址]无 思路分析 该题首先要确定是否为二叉树,还要确定是否为二叉搜索树,是否有父指 ...

  5. 【Offer】[5] 【替换空格】

    题目描述 思路分析 Java代码 代码链接 题目描述 请实现一个函数,把字符串中的每个空格替换成"%20". 例如输入"We are happy.",则输出&q ...

  6. Go 语言基础——变量常量的定义

    go语言不支持隐式类型转换,别名和原有类型也不能进行隐式类型转换 go语言不支持隐式转换 变量 变量声明 var v1 int var v2 string var v3 [10]int // 数组 v ...

  7. IDEA中自动导包快捷键

    1.File-->Settings 2.解释: 勾选标注第1个选项,IntelliJ IDEA 将在我们书写代码的时候自动帮我们导入需要用到的包.但是对于那些同名的包,还是需要手动 Alt + ...

  8. Net基础篇_学习笔记_第十一天_面向对象（构造函数）

    VS封装字段快捷键: 提取方法 Ctrl+R,M         封装字段 Ctrl+R,E           提取接口 Ctrl+R,I. 构成函数: public Student() { Con ...

  9. javascript实现二叉搜索树

    在使用javascript实现基本的数据结构中,练习了好几周,对基本的数据结构如 栈.队列.链表.集合.哈希表.树.图等内容进行了总结并且写了笔记和代码. 在 github中可以看到  点击查看,可以 ...

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

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