在寒冷的冬季,javascript 可以讓你的網站被雪花覆蓋,讓用戶感受到節日的氛圍。下面就來詳細了解如何在你的網站上實現雪花飄落效果。
首先,你需要創建一個新的網頁文件。在頭部的標簽中加上下面的代碼:
<code> <script language="JavaScript"> //打開JavaScript編寫 </script> </code>
接著,在您的頁面中加入需要的代碼。代碼可以用來生成雪花元素,計算它們的移動方向和速度,還可以渲染出整個頁面。
下面是一個簡單的實現雪花飄落效果的代碼:
<code> // 聲明變量 var snowmax=35 var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff") var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS") var snowletter="*" var sinkspeed=0.6 var snowmaxsize=30 var snowminsize=8 var snow=new Array() var marginbottom var marginright var x_mv=new Array(); var crds=new Array(); var lftrght=new Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/) var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random()) return rand } function initsnow() { if (ie5 || opera) { marginbottom = document.body.clientHeight marginright = document.body.clientWidth } else if (ns6) { marginbottom = window.innerHeight marginright = window.innerWidth } var snowsizerange=snowmaxsize-snowminsize for (i=0; i<=snowmax; i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i] = 0.03 + Math.random()/10; snow[i]=document.getElementById("s"+i) snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)] snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size+'px'; snow[i].style.color=snowcolor[randommaker(snowcolor.length)] snow[i].innerHTML=snowletter snow[i].style.position="absolute" document.body.appendChild(snow[i]) } movesnow() } function movesnow() { for (i=0; i<=snowmax; i++) { crds[i] += x_mv[i]; snow[i].style.left =lftrght[i] + marginright + x_mv[i]*Math.sin(crds[i])+'px'; snow[i].style.top = marginbottom- crds[i]*sinkspeed+'px'; if (snow[i].offsetTop>marginbottom-25) {snow[i].style.display='none'} } var timer=setTimeout("movesnow()",50) } for (i=0; i<=snowmax; i++) { document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>") } if (browserok) { window.onload=initsnow } </code>
此代碼生成35個元素,并使之飄落到一個可用的位置。你可以通過調整變量
snowmax
來控制雪花的數量。
如果你想要為雪花增加多彩的顏色,可以為snowcolor
變量添加更多的顏色值。
如果你希望更改雪花飄落的速度,可以更改sinkspeed
變量的值。
如果需要更多的集成,請查看相關的JavaScript
文檔和其他實例。