原生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 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
详解React项目中碰到的IE问题
Mar 14 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新手上路(四)
2006/10/09 PHP
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
php下MYSQL limit的优化
2008/01/10 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
Js+XML 操作
2006/09/20 Javascript
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
layui的select联动实现代码
2019/09/28 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
对Python3中的input函数详解
2018/04/22 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
大学本科毕业生的自我鉴定
2013/11/26 职场文书
大二学期个人自我评价
2014/01/13 职场文书
班级活动总结格式
2014/08/30 职场文书
在职员工证明书
2014/09/19 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS