pjblog网页页面添加雪花飞舞特效(一般网页都可类比添加)

冬天了,添加个雪花飞舞的效果是不是会让博客稍有特色点呢?
这里找了一个不错的特效代码,效果见本站页面演示即是。

在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>

然后将如下压缩包的图片放到根目录(与上面代码路径对应即可)

然后你就可以刷新页面看看效果了

雪花图片网盘下载:
点击网盘下载 注意选择普通单线程下载即可直接下载

点赞 (0)

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code