JavaScript实现烟花特效(面向对象)

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

本特效使用面向对象编程

分析

OOA

  • 点击触发事件
  • 烟花运动分成两个阶段

向上飞
         爆炸

OOD

class FireWork{
    constructor(){

    }
    bindEvent(){
        let _this = this;
        ele.onclick = function(){
            //fly结束再去调用boom函数
            _this.fly(_this.boom);
        }
    }
    fly(boom){

    }
    boom(){

    }
}

CSS设计实现

CSS代码

 *{
        margin: 0;
        padding: 0;
    }
    #box{
        width:800px;
        height:600px;
        position: relative;
        margin: 100px auto;
        background:#000000;
        border:2px solid red;
        overflow: hidden;
    }
    .ball{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        position: absolute;
        bottom: 0;
    }

JS编程实现

javascript代码

<script src="./utils.js"></script>
<script>
//
class FireWork{
    constructor(){
        this.box = document.getElementById("box");
        this.box_offset = {
              left : box.offsetLeft,
              top  : box.offsetTop
        }
    }
    bindEvent(){
        let _this = this;
        this.box.onclick = function( e ){
              e = e || event;
              _this.x = e.clientX - _this.box_offset.left;
              _this.y = e.clientY - _this.box_offset.top; 

              _this.fly(_this.boom);
        }
    }
    fly( boom ){
        let ele = this.createEle();
        let _this = this;
        // 放入box之中;
        ele.style.left = this.x + "px";

        let _left = this.x ;
        let _top  = this.y ; 

        animate( ele , {
              top : this.y
        } , function(){
              ele.remove();
              _this.boom( _left , _top );
        });
    }
    boom( x , y ){
        let r = 100;
        let count = 0 ;
        let _this = this;

        for(let i = 0 ; i < 20 ; i ++){
              let ele = this.createEle();
              ele.style.left = x +"px";
              ele.style.top  = y + "px";
              let _left =  parseInt(Math.cos( Math.PI / 10 * i ) * r ) + x ;
              let _top =  parseInt(Math.sin(  Math.PI / 10 * i ) * r) + y
              animate( ele , {
                    left : _left,
                    top  : _top,
                    opacity : 0
              } , function(){
                    ele.remove();
              })
        }
    }
    createEle(){
        let ele = document.createElement("div");
        ele.className = "ball";
        ele.style.backgroundColor = `rgb(${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)},${parseInt(Math.random() * 255)})`;
        this.box.appendChild( ele );
        return ele ;
    }
}

new FireWork().bindEvent();
</script>

引用的utils.js文件

function on(dom, event_name, handler_selector, delegation_handler) {
    if( typeof handler_selector === "string" && typeof delegation_handler === "function"){
        return delegation(dom, event_name, handler_selector, delegation_handler);
    }
    // 在dom对象里面建立一个事件名 : 事件处理函数对应的数组;
    // 判定当前事件处理函数是否在dom对象之中;
    var event_type = "_" + event_name;
    if (event_type in dom) {
        dom[event_type].push(handler_selector);
    } else {
        dom[event_type] = [handler_selector];
    }
    // 如果直接用事件名当成对象之中的key值,那么会和原有的dom功能名称冲突;
    // 因为特殊的事件名会导致事件无法触发,所以我们在这里要对事件名进行拆分处理;
    dom.addEventListener(event_name.split(".")[0], handler_selector)
}
function off(dom, event_name) {
    // 获取到dom对象里面事件名对应的一组事件处理函数;
    var callback_list = dom["_" + event_name];
    // 根据列表里面的所有函数进行事件移除 ;
    callback_list.forEach(function (event_handler) {
        dom.removeEventListener(event_name.split(".")[0], event_handler);
    })
    // 清空dom对象里面的事件处理函数组;
    dom["_" + event_name].length = 0;
}

function trigger(dom, event_type) {
    dom.dispatchEvent(new Event(event_type));
}

function delegation(dom, event_name, selector, event_handler) {
    dom.addEventListener(event_name, function (e) {
        e = e || event;
        var target = e.target || e.srcElement;
        while (target !== dom) {
              switch (selector[0]) {
                    case ".":
                          if (selector.slice(1) === target.className) {
                                event_handler.call(target , e )
                                return;
                          }
                    case "#":
                          if (selector.slice(1) === target.id) {
                                event_handler.call(target, e)
                                return;
                          }
                    default:
                          if (selector.toUpperCase() === target.nodeName) {
                                event_handler.call(target, e)
                                return;
                          }
              }
              target = target.parentNode;
        }
    })
}

function animate( dom , attrs , callback , transition = "buffer", speed = 10 ){
    // transition : 有两种动画方式 "buffer" , "liner"
    var _style = getComputedStyle( dom );

    // - 1. 数据变形 ;
    for(var attr in attrs ){
        attrs[attr] = {
              target : attrs[attr],
              now    : _style[attr]
        }
        // - 2. 速度 : 匀速运动速度正负 ;
        if( transition === "liner" ){
              attrs[attr].speed = attrs[attr].target > attrs[attr].now ? speed : - speed;
        }

        if( attr === "opacity"){
              attrs[attr].target *= 100
              attrs[attr].now    *= 100
        }else{
              attrs[attr].now = parseInt(attrs[attr].now)
        }
    }
    // - 关闭开启定时器;
    clearInterval( dom.interval );
    dom.interval = setInterval( function(){
        for(var attr in attrs ){
              // 取出当前值和属性值 ;
              // attrs[attr].target : 目标值;
              // attrs[attr].now    : 当前值; 

              let { target , now } = attrs[attr];

              // 缓冲运动时候的速度;
              if( transition === "buffer" ){
                    var speed = (target - now ) / 10 ;
                    speed = speed > 0 ? Math.ceil( speed ) : Math.floor( speed );
              }else if(transition === "liner"){
                    var speed =  attrs[attr].speed;
              }

              if( Math.abs(target - now) <= Math.abs( speed ) ){

                    if( attr === "opacity"){
                          dom.style[attr] = target / 100;
                    }else{
                          dom.style[attr] = target  + "px";
                    }

                    delete attrs[attr];
                    for(var attr in attrs ){
                          // 如果有数据循环会执行至少一次;
                          return false;
                    }
                    clearInterval(dom.interval);
                    typeof callback === "function" ? callback() : "";
              }else{
                    now += speed;

                    if( attr === "opacity"){
                          dom.style[attr] = now / 100;
                    }else{
                          dom.style[attr] = now  + "px";
                    }
                    // 给对象赋值;
                    attrs[attr].now = now;
              }
        }
    } , 30)
}

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

(0)

相关推荐

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

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

  • JavaScript实现的简单烟花特效代码

    本文实例讲述了JavaScript实现的简单烟花特效代码.分享给大家供大家参考,具体如下: 这是一款JavaScript烟花特效,过年的时候放到你的网页上祝贺大家牛年大吉吧,是不是很不错? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-yh-explode-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

  • 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烟花背景效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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"

  • 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

  • 用p5.js制作烟花特效的示例代码

    前言 之前看过一篇文章,使用processing制作烟花特效.效果如下 fireworks 网上调查了一圈了,发现processing是一个互动编程软件,java语言发展而来.而且动画效果是跑在processing专门的模拟器上. 不过好在也有对应的web扩展语言,有processing.js和p5.js. processing.js在github上已经好几年没有人维护了,一些processing的特性支持不了.为此踩了不少坑, 本文就集中讲解如何用p5.js写烟花特效. 代码讲解 proces

  • 新年快乐! javascript实现超级炫酷的3D烟花特效

    本文实例为大家分享了javascript实现3D烟花特效的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta charset="utf-8"> <title>3D烟花</title> <style> html,b

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

  • js实现烟花特效

    本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下 1.概述 在网页背景中实现鼠标点击出现模拟烟花爆炸的特效 2.思路 1.获取鼠标点击位置,底端创建烟花节点. 2.为烟花添加css属性,烟花节点从下至上运动. 3.运动至鼠标位置时移除烟花节点,同时生成多个烟花碎片. 4.为不同的烟花碎片随机生成不同的颜色.运动速度.运动方向. 5.烟花碎片超出屏幕显示部分时移除. 3.代码部分 <!DOCTYPE html> <html lang="en"&g

随机推荐