这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0418/270075.html