冬天了,添加个雪花飞舞的效果是不是会让博客稍有特色点呢?
这里找了一个不错的特效代码,效果见本站页面演示即是。
在header.asp的
区域内添加如下代码:
<script language="Javascript">
<!-- //雪花飞舞
Amount=20; //Smoothness! depends on image file size, the smaller the size the more you can use!
//Pre-load your image below!
Image0=new Image();
Image0.src="images/sto/flake1.gif";
Image1=new Image();
Image1.src="images/sto/flake2.gif";
Image2=new Image();
Image2.src="images/sto/flake3.gif";
Image3=new Image();
Image3.src="images/sto/flake4.gif";
Image4=new Image();
Image4.src="images/sto/flake5.gif";
grphcs=new Array(5)
grphcs[0]="images/sto/flake1.gif"
grphcs[1]="images/sto/flake2.gif"
grphcs[2]="images/sto/flake3.gif"
grphcs[3]="images/sto/flake4.gif"
grphcs[4]="images/sto/flake5.gif"
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Ypos<span style="text-decoration: line-through;"> = Math.round(Math.random()*WinHeight);
Xpos<span style="text-decoration: line-through;"> = Math.round(Math.random()*WinWidth);
Speed<span style="text-decoration: line-through;">= Math.random()*3+2;
Cstep<span style="text-decoration: line-through;">=0;
Step<span style="text-decoration: line-through;">=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed<span style="text-decoration: line-through;">*Math.sin(90*Math.PI/180);
sx = Speed<span style="text-decoration: line-through;">*Math.cos(Cstep<span style="text-decoration: line-through;">);
Ypos<span style="text-decoration: line-through;">+=sy;
Xpos<span style="text-decoration: line-through;">+=sx;
if (Ypos<span style="text-decoration: line-through;"> > WinHeight){
Ypos<span style="text-decoration: line-through;">=-60;
Xpos<span style="text-decoration: line-through;">=Math.round(Math.random()*WinWidth);
Speed<span style="text-decoration: line-through;">=Math.random()*5+2;
}
if (ns){
document.layers['sn'+i].left=Xpos<span style="text-decoration: line-through;">;
document.layers['sn'+i].top=Ypos<span style="text-decoration: line-through;">+hscrll;
}
else{
si<span style="text-decoration: line-through;">.style.pixelLeft=Xpos<span style="text-decoration: line-through;">;
si<span style="text-decoration: line-through;">.style.pixelTop=Ypos<span style="text-decoration: line-through;">+hscrll;
}
Cstep<span style="text-decoration: line-through;">+=Step<span style="text-decoration: line-through;">;
}
setTimeout('fall()',10);
}
fall();
//-->
</script>
然后将如下压缩包的图片放到根目录(与上面代码路径对应即可)
然后你就可以刷新页面看看效果了
雪花图片网盘下载:
点击网盘下载 (注意选择普通单线程下载即可直接下载)