1、在桌机上新建文本文档，命名为晓博JavaScript飘雪特效测试.txt，在文本文觇致惯鸹档里中入HTML文档的基本元素如下，并保存。<html><head&爿讥旌护gt;<title>晓博JavaScript飘雪特效测试</title></head><body><div id="zy"> <div id="login"></div> <div id="daohang"> <ul> <li><a href="index.html">首页</a></li> <li><a href="jianjie.html">七夕简介</a></li> <li><a href="#">七夕节传说</a></li> <li><a href="#">七夕节习俗</a></li> <li><a href="#">诗词& 歌谣</a></li> <li><a href="#">七夕节寄语</a></li> </ul> </div></div></body></html>
![Javascript脚本特效示例：[10]礼花背景](https://exp-picture.cdn.bcebos.com/a68c126efbf202b330a66fc830f4da5873dadbc4.jpg)
![Javascript脚本特效示例：[10]礼花背景](https://exp-picture.cdn.bcebos.com/df087f0f8b56ad046019e15adae10ef85956d0c4.jpg)
2、把如下代码加入<body>区域中，并重名文觇致惯鸹档为HTML文件。<layer name="a0" left=10 top=10 vis足毂忍珩ibility=show bgcolor="#ffffff" clip="0,0,1,1"></layer><layer name="a1" left=10 top=10 visibility=show bgcolor="#fff000" clip="0,0,1,1"></layer><layer name="a2" left=10 top=10 visibility=show bgcolor="#ffa000" clip="0,0,1,1"></layer><layer name="a3" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer><layer name="a4" left=10 top=10 visibility=show bgcolor="#00ff00" clip="0,0,1,1"></layer><layer name="a5" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer><layer name="a6" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,1,1"></layer><layer name="a7" left=10 top=10 visibility=show bgcolor="#ffffff" clip="0,0,1,1"></layer><layer name="a8" left=10 top=10 visibility=show bgcolor="#fff000" clip="0,0,1,1"></layer><layer name="a9" left=10 top=10 visibility=show bgcolor="#ffa000" clip="0,0,1,1"></layer><layer name="a10" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,1,1"></layer><layer name="a11" left=10 top=10 visibility=show bgcolor="#00ff00" clip="0,0,2,2"></layer><layer name="a12" left=10 top=10 visibility=show bgcolor="#0000ff" clip="0,0,2,2"></layer><layer name="a13" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,2,2"></layer><div id="starsDiv" style="position:absolute;top:0px;left:0px"><div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px"></div><div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px"></div><div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px"></div><div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px"></div><div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px"></div><div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px"></div><div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px"></div><div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px"></div><div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px"></div><div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px"></div><div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px"></div><div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px"></div><div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px"></div><div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px"></div></div><SCRIPT LANGUAGE="JavaScript"><!-- Beginvar 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]礼花背景](https://exp-picture.cdn.bcebos.com/5917cb3da824d8e99aa34dd5da598540112ac8c4.jpg)
![Javascript脚本特效示例：[10]礼花背景](https://exp-picture.cdn.bcebos.com/84010e2a04e23ea2673356c92b10bc33ed38c3c4.jpg)
4、我们把段代码加入到我们做成的网页中做为特效，这样我们的网页就可以有礼花的背景了，如下图
![Javascript脚本特效示例：[10]礼花背景](https://exp-picture.cdn.bcebos.com/bd72f23834bb19efc62efaa7497bd28287893ac5.jpg)