javascript实现网页背景烟花效果的方法


Posted in Javascript onAugust 06, 2015

本文实例讲述了javascript实现网页背景烟花效果的方法。分享给大家供大家参考。具体如下:

这里的网页背景烟花爆炸特效,不用说是用Js实现的,配合黑色背景效果最好,五颜六色的烟花效果,四散的烟花效果,以前发过一些网页上的烟花特效,本款类似,但代码更简洁。

运行效果如下图所示:

javascript实现网页背景烟花效果的方法

具体代码如下:

<html>
<head>
<title>背景的烟花效果</title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>
<body>
<script language="JavaScript">
var col = new Array('#ffffff','#fff000','#ffa000','#ff00ff','#00ff00','#0000ff','#ff0000');
var p='<div id="rearDiv" style="position:absolute;top:0px;left:0px">';
var n=0;
for (i=0;i<14;++i){
 n++;
 if (n=(col.length-1)) n=0;
 p=p+'<div style="position:relative;width:1px;height:1px;background:'+col[n]+';font-size:3px">.</div>';
}
p=p+"</div>";
document.write(p);
var Clrs = new Array('ff0000','00ff00','000aff','ff00ff','ffa500','ffff00','00ff00','ffffff','fffff0');
var sClrs = new Array('ffa500','55ff66','AC9DFC','fff000','fffff0');
var peepY;
var peepX;
var step = 5;
var tallyStep = 0;
var backColor = 'ffa000';
var Mtop = 250;
var Mleft = 250;
function dissilient() {
 peepY = window.document.body.clientHeight/3;
 peepX = window.document.body.clientWidth/8;
 enlarge();
 tallyStep+= step;
 reduce();
 T=setTimeout("dissilient()",20);
}
function enlarge(){
 for ( i = 0 ; i < rearDiv.all.length ; i++ ) {
  var c=Math.round(Math.random()*(Clrs.length-1));
  if (tallyStep < 90)
   rearDiv.all[i].style.background=backColor;
  if (tallyStep > 90)
   rearDiv.all[i].style.background=Clrs[c];
  rearDiv.all[i].style.top = Mtop + peepY*Math.sin((tallyStep+i*5)/3)*Math.sin(550+tallyStep/100);
  rearDiv.all[i].style.left = Mleft + peepY*Math.cos((tallyStep+i*5)/3)*Math.sin(550+tallyStep/100);
 }
}
function reduce(){
 if (tallyStep == 220) {
  tallyStep = -10;
  var k=Math.round(Math.random()*(sClrs.length-1));
  backColor = sClrs[k];
  Dtop = window.document.body.clientHeight - 250;
  Dleft = peepX * 3.5;
  Mtop = Math.round(Math.random()*Dtop);
  Mleft = Math.round(Math.random()*Dleft);
  document.all.rearDiv.style.top = Mtop+document.body.scrollTop;
  document.all.rearDiv.style.left = Mleft+document.body.scrollLeft;
  if ((Mtop < 20) || (Mleft < 20)) {
  Mtop += 90;
  Mleft += 90;
 }
 }
}
dissilient();
</script>
</body>
</html>

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

Javascript 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
JS图片轮播与索引变色功能实例详解
Jul 06 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 #Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 #Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 #Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 #Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 #Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 #Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 #Javascript
You might like
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
给ECShop添加最新评论
2015/01/07 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
2016/11/25 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
Python中的ConfigParser模块使用详解
2015/05/04 Python
Python的randrange()方法使用教程
2015/05/15 Python
Python中static相关知识小结
2018/01/02 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python用requests实现http请求代码实例
2019/10/31 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
2014年工作总结与下年工作计划
2014/11/27 职场文书
先进工作者申报材料
2014/12/23 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python