原生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表格分页实现代码
Sep 18 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
Dec 23 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
史上最全JavaScript常用的简写技巧(推荐)
Aug 17 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
JS如何把字符串转换成json
Feb 21 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
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
JavaScript 检测浏览器和操作系统的脚本
2008/12/26 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
简单谈谈json跨域
2016/03/13 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
python实现代码行数统计示例分享
2014/02/10 Python
wxPython窗口中文乱码解决方法
2014/10/11 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python实现Dijkstra算法
2018/10/17 Python
Python使用matplotlib绘制三维参数曲线操作示例
2019/09/10 Python
python绘制雪景图
2019/12/16 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
英语专业个人求职自荐信
2013/09/21 职场文书
职高毕业生自我鉴定
2013/10/21 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
小学毕业感言500字
2014/02/28 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
解决xampp安装后Apache无法启动
2022/03/21 Servers
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android