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

2010-01-16 0 条评论 4,856 次阅读被赞了 0 次

本文发布于：2010-01-16，最后更新于：2017-02-07，如果内容失效请留言告知。

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

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

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

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

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

志文工作室

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

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

发表回复取消回复

相关文章:

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表回复 取消回复

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

发表回复取消回复