<!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. 牛客小白月赛4 C 病菌感染 dfs

    链接:https://www.nowcoder.com/acm/contest/134/C来源:牛客网 题目描述 铁子和顺溜上生物课的时候不小心将几滴超级病菌滴到了培养皿上,这可急坏了他们. 培养皿可 ...

  2. CF 988C Equal Sums 思维 第九题 map

    Equal Sums time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  3. 实现 Java 本地缓存，该从这几点开始

    缓存,我相信大家对它一定不陌生,在项目中,缓存肯定是必不可少的.市面上有非常多的缓存工具,比如 Redis.Guava Cache 或者 EHcache.对于这些工具,我想大家肯定都非常熟悉,所以今天 ...

  4. 洛谷 P1059【明明的随机数】 题解

    事实上,完全可以先将输入进来带有重复的元素们保存进一个数组并对该数组进行排序,再将该数组的各个元素逐个判断是否与前一元素相同(重复与否的判断),将不重复的元素转移至另一个数组,与此同时进行对不重复元素 ...

  5. SpringBoot——HelloWorld

    微服务和单体应用的宏观理解 微服务:一组小型应用通过HTTP的方式进行沟通的开发思想 单体应用:ALL IN ONE 单体应用的不足: 随着业务逻辑的不断更新和迭代开发,起初的小型应用会不断膨胀,当应 ...

  6. 从壹开始学习NetCore 44 ║ 最全的 netcore 3.0 升级实战方案

    缘起 哈喽大家中秋节(后)好呀!感觉已经好久没有写文章了,但是也没有偷懒哟,我的视频教程<系列一.NetCore 视频教程(Blog.Core)>也已经录制八期了,还在每周末同步更新中,欢 ...

  7. linux环境上anaconda的安装与卸载

    首先下载linux上anaconda的安装包: $ wget https://repo.anaconda.com/archive/Anaconda3-5.1.0-Linux-x86_64.sh 然后赋 ...

  8. Linux服务器MySQL安装

    Linux服务器MySQL安装 1. MySQL官网下载如图: 2. 安装MySQL [root@iZ2zebb0428roermd00462Z /]# rpm -ivh https://dev.my ...

  9. Day 19 磁盘管理

    1.磁盘的基本概念 1.什么是磁盘 磁盘(disk)是指利用磁记录技术存储数据的存储器. 磁盘是计算机主要的存储介质,可以存储大量的二进制数据,并且断电后也能保持数据不丢失. *绝大多数人对硬盘都不陌 ...

  10. 42 (OC)* 字典实现原理--哈希原理

    一.NSDictionary使用原理 1.NSDictionary(字典)是使用 hash表来实现key和value之间的映射和存储的,hash函数设计的好坏影响着数据的查找访问效率. - (void ...