原生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程序设计有所帮助。

Javascript 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 Javascript
JS使用for in有序获取对象数据
May 19 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 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中计算程序运行时间的类代码
2012/11/03 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
node.js中的fs.exists方法使用说明
2014/12/17 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
Python实现全局变量的两个解决方法
2014/07/03 Python
Python中的匿名函数使用简介
2015/04/27 Python
python抽象基类用法实例分析
2015/06/04 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
python实现输入数字的连续加减方法
2018/06/22 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
详解Python 函数参数的拆解
2020/09/02 Python
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
业务助理岗位职责
2013/11/18 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
运动会跳远广播稿
2014/02/04 职场文书
创先争优活动方案
2014/02/12 职场文书
上班玩手机检讨书
2014/02/17 职场文书
食品安全演讲稿
2014/09/01 职场文书
学校国庆节活动总结
2015/03/23 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
花田少年史观后感
2015/06/16 职场文书
英语读书笔记
2015/07/02 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
Python人工智能之混合高斯模型运动目标检测详解分析
2021/11/07 Python