工具 | 下雪の效果2

去年圣诞节前夕分享过了 下雪の效果 ,由于雪是白色又很小,所以今天分享过另外一种。
这么巧今年分享是也是圣诞节前夕。


1. 去设计》页面元素》添加小工具》HTML/Java Script

2. 把这些代码paste进去:
<script>

//Here you can add your own picture for snow. Just change the url
var snowsrc="http://i13.servimg.com/u/f13/11/52/70/02/snowba10.png"
//how many snowflakes there will be (currently 12)
var no =40;
//How fast will the snow disappear (0 is never)
var hidesnowtime = 0;
//The height the snow will reach before it disappears ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////////////////////////End of Settings///////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;

if (ns6up)
{
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up)
{
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i)
{
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ie4up||ns6up)
{
if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://rftactical.darkbb.com/index.htm\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
}
else
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6()
{
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i)
{
yp[i] += sty[i];
if (yp[i] > doc_height-50)
{
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow()
{
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up)
{
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>
↑ 上面是白色的雪球



下面还有其他雪球颜色可以选。要换颜色的话把 上面 紫色underline 的url 换成下面你要的颜色的url 就好了 ^^


 黑色
http://i905.photobucket.com/albums/ac251/bigadira95/snowhitam.png

粉红色
http://i905.photobucket.com/albums/ac251/bigadira95/snowmerah.png

蓝色
http://i905.photobucket.com/albums/ac251/bigadira95/snowbiru.png

紫色
http://i608.photobucket.com/albums/tt163/pwincess9214/snow.png


完。

47 条评论:

  1. 我换windowheight了还是不能显示整页的?

    回复删除
  2. 要放在哪里你前面或后面?

    回复删除
  3. 妮妮
    什么前面后面?

    ayuki
    蛤?为什么要显示整页?

    回复删除
  4. 筱莹子
    白色的就直接copy代码就行了^^

    回复删除
  5. 新模板跟旧模板都能用??

    回复删除
  6. Wei
    对啊~~

    petpetenn
    你换别的颜色看看~

    回复删除
  7. 哇哇~~我試了你別的那個下雪功能不能用傷心死了~
    不過你這篇我終於能做到了~~謝謝你 ^^
    解決了我的煩惱吖~~~~~
    愛死你了~~~親一個╭(╯3╰)╮♥♥♥

    回复删除
  8. 我很喜欢落叶,不舍得换下雪勒~

    回复删除
  9. 弄到了...可是是在下面下面的><

    回复删除
  10. 不用客气~

    ----------------------------------------
    aiyuki,wei
    哦,因为代码规定好雪的位置,所以要改也改不到==

    мs sнειιч -♥-,im
    我已经用你们的模板尝试过了,成功啊~
    你们在试试看。

    草本街
    那就不用换咯^^你的落叶很特别,独一无二 :3

    回复删除
  11. 不能讓雪下到下面去的嗎?
    因爲它只是下一部分罷了. /.\ 很怪哦. ><

    回复删除
  12. Keii Keii
    我也知道这个问题。
    可是目前还没有解决方法==

    回复删除
  13. 哦..
    可是 還是很美啦. 我把它帶走嚕~

    回复删除
  14. 放了 , 可是没有反应 ~

    回复删除
  15. 下雪的速度可以调的吗?:))

    回复删除
  16. @Mei Jing
    有啊,我看到你的部落格有~

    @慧
    不能的哦><

    回复删除
  17. 我找不到(页面元素)~要去哪里找?

    回复删除
  18. 请问下能不能够放多过一种颜色?
    能的话,怎样?
    谢谢!=]

    回复删除
  19. 没有了哦,都很多颜色了 :)

    回复删除
  20. 好漂亮哦~谢谢你!!!

    回复删除
  21. 我不知道为什么你弄不到,可是别人都弄到~

    回复删除
  22. 我也是在下面的T.T

    回复删除
  23. 是这样的,这个小工具有问题@@

    回复删除
  24. 为什么我的在下面的...?? @^@

    回复删除
  25. 是这样的,这个小工具有问题@@

    回复删除
  26. 为什么还是没有的?我改成紫色了。。。。T^T

    回复删除
  27. 都放到啊~只是可能位置会不同罢了

    回复删除
  28. 为什么只是一半的??

    回复删除
  29. 转载了 (: 已附上你的链接了 谢谢 (:

    回复删除
  30. Jasmin
    嗯嗯~这个工具是这样的哦。
    我也帮不上什么忙,抱歉哦 ><

    回复删除
  31. 很漂亮,谢谢博主分享!

    回复删除
  32. 我拿走了哦 :D
    谢谢!:)

    回复删除

你的留言将在审核后发布。谢谢 ♥