编程 Javascript

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

Posted in Javascript onMarch 20, 2015

本文实例讲述了原生Js实现简易烟花爆炸效果的方法。分享给大家供大家参考。具体分析如下：

实现原理：在一定范围内，随机生成一些div，形成烟花效果

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>js烟花效果</title>

<script type="text/javascript">

document.onclick=function (ev)

{

    var oEvent=ev||event;

    var aDiv=[];

    var oDiv=null;

    var _oDiv=document.createElement('div');

    var i=0;

    var x=oEvent.clientX;

    var y=oEvent.clientY;

    _oDiv.style.position='absolute';

    _oDiv.style.background='red';

    _oDiv.style.width='3px';

    _oDiv.style.height='30px';

    _oDiv.style.left=oEvent.clientX+'px';

    _oDiv.style.top=document.documentElement.clientHeight+'px';

    document.body.appendChild(_oDiv);

    var t=setInterval(function (){

        if(_oDiv.offsetTop<=y)

        {

            clearInterval(t);

            show();

            document.body.removeChild(_oDiv);

        }

        _oDiv.style.top=_oDiv.offsetTop-30+'px';

    }, 30);

    function show()

    {

        var oDiv=null;

        for(i=0;i<100;i++)

        {

            oDiv=document.createElement('div');

            oDiv.style.width='3px';

            oDiv.style.height='3px';

            oDiv.style.background='#'+Math.ceil(Math.random()*0xEFFFFF+0x0FFFFF).toString(16);

            oDiv.style.position='absolute';

            oDiv.style.left=x+'px';

            oDiv.style.top=y+'px';

            var a=Math.random()*360;

            //oDiv.speedX=Math.random()*40-20;

            //oDiv.speedY=Math.random()*40-20;

            oDiv.speedX=Math.sin(a*180/Math.PI)*20*Math.random();

            oDiv.speedY=Math.cos(a*180/Math.PI)*20*Math.random();

            document.body.appendChild(oDiv);

            aDiv.push(oDiv);

        }

    }

    setInterval(doMove, 30);

    function doMove()

    {

        for(i=0;i<aDiv.length;i++)

        {

            aDiv[i].style.left=aDiv[i].offsetLeft+aDiv[i].speedX+'px';

            aDiv[i].style.top=aDiv[i].offsetTop+aDiv[i].speedY+'px';

            aDiv[i].speedY+=1;

            if(aDiv[i].offsetLeft<0 || aDiv[i].offsetLeft>document.documentElement.clientWidth || aDiv[i].offsetTop<0 || aDiv[i].offsetTop>document.documentElement.clientHeight)

            {

                document.body.removeChild(aDiv[i]);

                aDiv.splice(i, 1);

            }

        }

    }

};

</script>

</head>

<body style="overflow:hidden; background:black;">

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

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

- Author -

zhinengshe

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js实现键盘操作实现div的移动或改变的原理及代码

Jun 23 Javascript

JavaScript检查弹出窗口是否被阻拦的方法技巧

Mar 13 Javascript

AngularJS基础 ng-dblclick 指令用法

Aug 01 Javascript

js中获取jsp表单中radio类型的值简单实例

Aug 15 Javascript

jQuery编写设置和获取颜色的插件

Jan 09 Javascript

vue快捷键与基础指令详解

Jun 01 Javascript

AngularJS实现自定义指令与控制器数据交互的方法示例

Jun 19 Javascript

JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象，回归迭代和循环】

May 07 Javascript

基于JavaScript实现每日签到打卡轨迹功能

Nov 29 Javascript

深入了解Hybrid App技术的相关知识

Jul 17 Javascript

解决vue的touchStart事件及click事件冲突问题

Jul 21 Javascript

Javascript基于OOP实实现探测器功能代码实例

Aug 26 Javascript

Javascript调用函数方法的几种方式介绍

Mar 20 #Javascript

初识Node.js

Mar 20 #Javascript

JavaScript Sort 的一个错误用法示例

Mar 20 #Javascript

JS实现的数组全排列输出算法

Mar 19 #Javascript

JavaScript在浏览器标题栏上显示当前日期和时间的方法

Mar 19 #Javascript

JavaScript实现在标题栏上显示当前日期的方法

Mar 19 #Javascript

JavaScript显示当前文档最后修改日期的方法

Mar 19 #Javascript

You might like

PHP extract 将数组拆分成多个变量的函数

2010/06/30 PHP

yii操作session实例简介

2014/07/31 PHP

PHP彩蛋信息介绍和阻止泄漏的方法（隐藏功能）

2014/08/06 PHP

php从memcache读取数据再批量写入mysql的方法

2014/12/29 PHP

PHP实现股票趋势图和柱形图

2015/02/07 PHP

php自定义错误处理用法实例

2015/03/20 PHP

Symfony的安装和配置方法

2016/03/17 PHP

网站被恶意镜像怎么办 php一段代码轻松搞定（全面版）

2018/10/23 PHP

使用jquery动态加载javascript以减少服务器压力

2012/10/29 Javascript

js控制浏览器全屏示例代码

2014/02/20 Javascript

ext combobox动态加载数据库数据(附前后台)

2014/06/17 Javascript

根据当前时间在jsp页面上显示上午或下午

2014/08/18 Javascript

理解javascript中的严格模式

2016/02/01 Javascript

原生JS实现图片翻书效果

2017/02/16 Javascript

微信小程序列表的上拉加载和下拉刷新的实现

2017/04/01 Javascript

Javascript 一些需要注意的细节(必看篇)

2017/07/08 Javascript

微信小程序自定义组件

2017/08/16 Javascript

jquery的 filter()方法使用教程

2018/03/22 jQuery

vue input输入框关键字筛选检索列表数据展示

2020/10/26 Javascript

JavaScript：ES2019 的新特性(译)

2019/08/08 Javascript

微信小程序实现传递多个参数与事件处理

2019/08/12 Javascript

React Hooks 实现和由来以及解决的问题详解

2020/01/17 Javascript

jquery实现鼠标悬浮弹出气泡提示框

2020/12/23 jQuery

Python中shape计算矩阵的方法示例

2017/04/21 Python

使用python为mysql实现restful接口

2018/01/05 Python

在Python中使用gRPC的方法示例

2018/08/08 Python

pyqt 实现为长内容添加滑轮 scrollArea

2019/06/19 Python

Python django框架开发发布会签到系统(web开发)

2020/02/12 Python

html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

2014/05/08 HTML / CSS

HTML5 Canvas的常用线条属性值总结

2016/03/17 HTML / CSS

俄罗斯运动、健康和美容产品在线商店：Lactomin.ru

2020/07/23 全球购物

摩飞电器俄罗斯官方网站：Morphy Richards俄罗斯

2020/07/30 全球购物

洗煤厂厂长岗位职责

2014/01/03 职场文书

珍惜资源的建议书

2014/08/26 职场文书

2015年质量管理工作总结范文

2015/05/18 职场文书

解决WINDOWS电脑开机后桌面没有任何图标

2022/04/09 数码科技