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 相关文章推荐
jqTransform form表单美化插件使用方法
Jul 05 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 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下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
脚本收藏iframe
2006/07/21 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
分享PyCharm的几个使用技巧
2019/11/10 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
什么是抽象
2015/12/13 面试题
工程项目建议书范文
2014/03/12 职场文书
开业庆典主持词
2014/03/21 职场文书
春节联欢会主持词
2014/03/24 职场文书
科学发展观演讲稿
2014/09/11 职场文书
2014年信访工作总结
2014/11/17 职场文书
幼儿园辞职信
2015/05/13 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
Linux中sftp常用命令整理
2022/06/28 Servers
使用CSS实现音波加载效果
2023/05/07 HTML / CSS