Javascript脚本特效示例：[10]礼花背景

2026-01-18 10:19:30

1、在桌机上新建文本文档，命名为晓博JavaScript飘雪特效测试.txt，在文本文档里中入HTML文档的基本元素如下，并保存。

<html>

<head>

<title>晓博JavaScript飘雪特效测试</title>

</head>

<body>

<ul>

<li><a href="#">七夕节传说</a></li>

<li><a href="#">七夕节习俗</a></li>

<li><a href="#">七夕节寄语</a></li>

</ul>

</div>

</body>

</html>

Javascript脚本特效示例：[10]礼花背景

2、把如下代码加入<body>区域中，并重名文档为HTML文件。

</div>

<!-- Begin

var Clrs = new Array(9);

Clrs[0] = 'ff0000';

Clrs[1] = '00ff00';

Clrs[2] = '000aff';

Clrs[3] = 'ff00ff';

Clrs[4] = 'ffa500';

Clrs[5] = 'ffff00';

Clrs[6] = '00ff00';

Clrs[7] = 'ffffff';

Clrs[8] = 'fffff0';

var sClrs = new Array(5);

sClrs[0] = 'ffa500';

sClrs[1] = '55ff66';

sClrs[2] = 'AC9DFC';

sClrs[3] = 'fff000';

sClrs[4] = 'fffff0';

var yBase;

var xBase;

var step;

var currStep = 0;

var Xpos = 1;

var Ypos = 1;

var initialStarColor = 'ffa000';

var Mtop = 250;

var Mleft = 250;

function Fireworks() {

if (document.all) {

yBase = window.document.body.offsetHeight / 3;

xBase = window.document.body.offsetWidth / 8;

}

else if (document.layers) {

yBase = window.innerHeight / 3;

xBase = window.innerWidth / 8;

}

if (document.all) {

step = 5;

for ( i = 0 ; i < starsDiv.all.length ; i++ ) {

for (ai = 0; ai < Clrs.length; ai++) {

var c = Math.round(Math.random()*[ai]);

}

if (currStep < 90)

starsDiv.all[i].style.background=initialStarColor;

if (currStep > 90)

starsDiv.all[i].style.background=Clrs[c];

starsDiv.all[i].style.top = Mtop + yBase*Math.sin((currStep+i*5)/3)*Math.sin(550+currStep/100)

starsDiv.all[i].style.left = Mleft + yBase*Math.cos((currStep+i*5)/3)*Math.sin(550+currStep/100)

}

else if (document.layers) {

step = 5;

for ( j = 0 ; j < 24 ; j++ ) { //number of NS layers!

var templayer = "a"+j;

for (ai = 0; ai < Clrs.length; ai++) {

var c = Math.round(Math.random()*[ai]);

}

if (currStep < 90)

document.layers[templayer].bgColor=initialStarColor;

if (currStep > 90)

document.layers[templayer].bgColor=Clrs[c];

document.layers[templayer].top = Mtop + yBase*Math.sin((currStep+j*5)/3)*Math.sin(550+currStep/100)

document.layers[templayer].left = Mleft + yBase*Math.cos((currStep+j*5)/3)*Math.sin(550+currStep/100)

}

currStep+= step;

T=setTimeout("Fireworks()",5);

if (currStep == 220) {

currStep = -10;

for (n = 0; n < sClrs.length; n++) {

var k = Math.round(Math.random()*n);

}

initialStarColor = sClrs[k];

if (document.all) {

Dtop = window.document.body.clientHeight - 250;

Dleft = xBase * 3.5;

Mtop = Math.round(Math.random()*Dtop);

Mleft = Math.round(Math.random()*Dleft);

document.all.starsDiv.style.top = Mtop+document.body.scrollTop;

document.all.starsDiv.style.left = Mleft+document.body.scrollLeft;

}

else if (document.layers) {

Dleft = window.innerWidth - 100;

Dtop = window.innerHeight - 100;

Mtop = Math.round(Math.random()*Dtop+window.pageYOffset);

Mleft = Math.round(Math.random()*Dleft+window.pageXOffset);

document.layers[templayer].top = Mtop;

document.layers[templayer].left = Mleft;

}

if ((Mtop < 20) || (Mleft < 20)) {

Mtop += 90;

Mleft += 90;

}

Fireworks();

// End -->

</script>

3、用IE浏览器打开晓博JavaScript特效测试.html文件，可以看到图片跟随鼠标移动特效，如下图

Javascript脚本特效示例：[10]礼花背景

4、我们把段代码加入到我们做成的网页中做为特效，这样我们的网页就可以有礼花的背景了，如下图

Javascript脚本特效示例：[10]礼花背景

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。