原生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 相关文章推荐
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 数码科技