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

站长资源 2024/11/26 佚名

2 0 1

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

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

运行效果如下图所示：

具体代码如下：

<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,网页背景,烟花效果

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“javascript实现网页背景烟花效果的方法”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

JS实现霓虹灯文字效果的方法

JS实现三级折叠菜单特效，其它级可自动收缩

评论“javascript实现网页背景烟花效果的方法”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接