脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript网页背景烟花效果

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

 更新时间：2015年08月06日 16:35:12   作者：皮蛋  
这篇文章主要介绍了javascript实现网页背景烟花效果的方法,涉及javascript数学运算及页面元素动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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之不可靠的undefined

    JavaScript之不可靠的undefined

    这篇文章主要介绍了JavaScript之不可靠的undefined，想深入JS的同学，可以参考下
    2021-05-05
  • JS实现躲避粒子小游戏

    JS实现躲避粒子小游戏

    这篇文章主要为大家详细介绍了JS实现躲避粒子小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • js去空格技巧分别去字符串前后、左右空格

    js去空格技巧分别去字符串前后、左右空格

    js去空格想必大家多少都会点吧，在接下来的文章中为大家详细介绍下如何分别去字符串前后，左边，右边空格，感兴趣的朋友可以参考下
    2013-10-10
  • 分享一个自己写的简单的javascript分页组件

    分享一个自己写的简单的javascript分页组件

    这篇文章主要分享一个自己写的简单的javascript分页组件，效果十分不错，代码也很详尽，这里推荐给小伙伴们。
    2015-02-02
  • 基于ajax与msmq技术的消息推送功能实现代码

    基于ajax与msmq技术的消息推送功能实现代码

    这篇文章主要介绍了基于ajax与msmq技术的消息推送功能实现代码，具有一定的参考价值，有兴趣的可以了解一下。
    2016-12-12
  • js登录弹出层特效

    js登录弹出层特效

    点击弹出层，点击后弹出一个登录层，在这个层内的内容调用了一个示例页面
    2014-03-03
  • JS 实现导航栏悬停效果(续2)

    JS 实现导航栏悬停效果(续2)

    发现原来的方法还有是有几个问题：首先Js代码冗余，导航条上的Tab是用js实现跳转而不是超链接，还有导航条本身用fixed定位，但没有被设置为水平居中，而是在JS中更改left值使其居中
    2013-09-09
  • JavaScript多种滤镜算法实现代码实例

    JavaScript多种滤镜算法实现代码实例

    这篇文章主要介绍了JavaScript多种滤镜算法实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • 跨域浏览器设置解决前端跨域问题

    跨域浏览器设置解决前端跨域问题

    这篇文章主要为大家介绍了前端跨域浏览器设置解决前端跨域问题的方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • ajax分页效果（bootstrap模态框）

    ajax分页效果（bootstrap模态框）

    这篇文章主要为大家详细介绍了ajax分页效果的实现方法，结合bootstrap模态框使用 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论