js实现炫酷的烟花效果

本文实例为大家分享了js实现炫酷的烟花效果的具体代码,供大家参考,具体内容如下

我们要理清整个流程的思路。

首先建立一块画布,用于展示烟花的效果,然后就要去思考烟花燃放的流程,我们都知道烟花通常都是先有一份飞上天,然后再分散成很多个小烟花,并且每一个小烟花都有不同的样式以及运动方式。

所有整体思路就是先建立一个div作为我们的大烟花,当大烟花运动到我们鼠标点击的位置的时候,大烟花就会消失,然后就会产生更多的小烟花,并且这些小烟花的运动轨迹样式各不相同。

1.建立一块画布(div)用于展示烟花的效果

/*给画布设置css样式  */
#container {
        width: 80%;
        height: 600px;
        border: 1px red solid;
        position: relative;
        margin: 20px auto;
        cursor: pointer;
        background: black;
    }
<!-- 设置一个div -->
<div id="container"></div>

2.获取节点

 //获取节点
 var app = document.getElementById('container');
        //给app设置一个绑定事件
        app.onclick = function(event) {
                var e = event || window.event
               //获得鼠标点击的位置的坐标
                var pos = {
                    cy: e.offsetY,
                    cx: e.offsetX
                }
                new Fire(app, pos)
            }

烟花的实现过程:先实现一个大的div运动到鼠标点击的位置,然后在散开成为很多个div

3.先实现大烟花(需要调用随机数方法,随机颜色方法,以及运动函数)

// 构造函数
function Fire(app, pos) {
            //把属性设置成变量
            this.app = app;
            this.pos = pos;
            //创建一个大的div
            this.bf = document.createElement('div');
            //设置一个类名
            this.bf.className = 'fire';
            //设置样式
            this.bf.style.left = this.pos.cx + 'px';
            this.bf.style.background = this.getColor();
            this.app.appendChild(this.bf);
            //调用运动函数
            this.move(this.bf, {
                top: this.pos.cy
            }, () => {
                this.bf.remove();
                this.smallFire();
            })
        }

3.1首先先设置fire的样式

这是fire的初始样式

 .fire {
        background: red;
        position: absolute;
        /* 设置bottom时,top获取为最大值,减去鼠标点击位置 */
        bottom: 0px;
        width: 6px;
        height: 6px;
    }

3.2设置一个随机数和随机颜色的方法(原型对象)

//获得一个随机数方法
Fire.prototype.rand = function(min, max) {
            return Math.round(Math.random() * (max - min) + min);
        }

//获得一个随机颜色的方法
 Fire.prototype.getColor = function() {
         let sum = '#';
         for (let i = 0; i < 6; i++) {
               sum += this.rand(0, 15).toString(16)
           }
             return sum;
           }

3.3封装一个运动函数(原型对象)

Fire.prototype.move = function(ele, target, cb) {
                // clearInterval(times);
                let times = setInterval(function() {
                    // console.log(this);
                    var onOff = true;
                    // 遍历运动的方向和目标
                    for (let attr in target) {
                        // attr 表示运动的属性
                        // console.log(attr);
                        // 获取元素属性的实时值
                        let tmpVal = parseInt(this.getPos(ele, attr))
                            // 计算speed
                            // console.log(tmpVal, attr);
                        let speed = (target[attr] - tmpVal) / 10;
                        // 取整
                        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                        // 停止计时器,当一个属性运动到位置,设置开关状态
                        if (tmpVal == target[attr]) onOff = true;
                        // 让元素动起来
                        ele.style[attr] = tmpVal + speed + 'px';
                    }

                    // 判断开关状态,清除定时器
                    for (var moveAttr in target) {
                        // 如果不相等,就说明有属性没有运动到位置,定时器不能停止
                        if (target[moveAttr] !== parseInt(this.getPos(ele, moveAttr))) {
                            onOff = false;
                            break;
                        }
                    }
                    if (onOff) {
                        clearInterval(times);
                        cb && cb();
                    }
                    // console.log(1111);
                }.bind(this), 30)
            }
            // 获取元素的实时位置的函数
        Fire.prototype.getPos = function(obj, attr) {
            if (obj.currentStyle) { // 获取css的样式
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj)[attr]
            }
        }

通过以上几个步骤我们就可以得到大烟花的运动轨迹,大烟花运动到指定位置后就会消失,并且从消失的地方产生许多小烟花。由前面的分析可以知道,小烟花的运动轨迹和样式各不相同,接下来就是小烟花的实现

4.小烟花的实现

4.1设置samll-fire的样式

这是samll-fire的初始属性

.small-fire {
        width: 10px;
        height: 10px;
        position: absolute;
        border-radius: 50%;
    }

4.2设置小烟花的属性

//小烟花
Fire.prototype.smallFire = function() {
            //首先我们设置小烟花的数量
            let num = this.rand(50, 60)
            //遍历 给每一个小烟花设置不同的样式
            for (let i = 0; i < num; i++) {
                let sf = document.createElement('div');
                sf.className = 'small-fire';
                sf.style.left = this.pos.cx + 'px';
                sf.style.top = this.pos.cy + 'px';
                sf.style.background = this.getColor();
                //console.log(sf);
                //追加到页面中
                this.app.appendChild(sf);
                //使小烟花的运动轨迹成圆周运动
                //var top = parseInt(Math.sin(Math.PI / 180 * 360 / num * i) * r) + this.pos.cy;
                //var left = parseInt(Math.cos(Math.PI / 180 * 360 / num * i) * r) + this.pos.cx;
                 //给小烟花一个随机的位置,可以是在画布里面的任意一个位置
                 let top = this.rand(0, this.app.offsetHeight - sf.offsetHeight);
                 let left = this.rand(0, this.app.offsetWidth - sf.offsetWidth);
                //调用运动函数
                this.move(sf, {
                    top: top,
                    left: left
                }, function() {
                    sf.remove();
                })
            }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JS实现网页烟花动画效果

    原生js实现放烟花效果,点击鼠标,然后向四周扩散,最后自由落体效果!最简单的方法实现! 效果图: CSS代码: *{ padding: 0px; margin: 0px; background: #000; } .firworks{ width: 6px; height: 6px; position: absolute; } js代码: <script type="text/javascript"> //封装一个颜色随机的效果 function randomColor(){

  • JS实现放烟花效果

    本文实例为大家分享了JS实现放烟花效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>放烟花--欣欣博客</title> <style> html,body{overflow:hidden;} body,div,p{margin:0;padding:0;} body{background:#00

  • JS烟花背景效果实现方法

    本文实例讲述了JS烟花背景效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • JavaScript实现烟花绽放动画效果

    先编写一个烟花绽放的动画效果. 放烟花时,一个烟花可分为两个阶段:(1)烟花上升到空中:(2)烟花炸开成碎片,炸开的碎片慢慢消散. 为此抽象出两个对象类:Firework和Particle.其中,Firework用于表示一个烟花对象,Particle用于表示一个烟花炸开后的各碎片. Firework对象类定义6个属性:表示烟花上升轨迹中各点的坐标(x,y).烟花弧状轨迹的偏转角度angle.上升阶段水平和垂直方向的位移改变量xSpeed和ySpeed.烟花的色彩色相hue. 坐标属性值y的初始值

  • javascript实现网页背景烟花效果的方法

    本文实例讲述了javascript实现网页背景烟花效果的方法.分享给大家供大家参考.具体如下: 这里的网页背景烟花爆炸特效,不用说是用Js实现的,配合黑色背景效果最好,五颜六色的烟花效果,四散的烟花效果,以前发过一些网页上的烟花特效,本款类似,但代码更简洁. 运行效果如下图所示: 具体代码如下: <html> <head> <title>背景的烟花效果</title> <style type="text/css"> <!

  • JS实现烟花爆炸效果

    本文实例为大家分享了JS实现烟花爆炸的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%;

  • JS基于面向对象实现的放烟花效果

    本文实例讲述了JS基于面向对象实现的放烟花效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • 原生Js实现简易烟花爆炸效果的方法

    本文实例讲述了原生Js实现简易烟花爆炸效果的方法.分享给大家供大家参考.具体分析如下: 实现原理: 在一定范围内,随机生成一些div,形成烟花效果 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js烟花效果</title> <script type="text/javascript"> d

  • JS实现超炫网页烟花动画效果的方法

    本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • 原生JS实现烟花效果

    原生JS实现烟花效果,点击页面生成烟花,向四周扩散,然后再坠落下去.(这里的烟花我是用的特殊字符爱心形状) 基础css代码 /* 设置基础的css样式 */ body{background: #000;overflow: hidden;} .fire{position: absolute;width: 4px;height: 30px;} js代码: 1.给页面添加点击事件,生成主体烟花 //给页面设置点击事件 document.onclick = function(eve){ var e =

随机推荐

其他