Cùng với các bài viết về dịp lễ giáng sinh, mình tiếp tục mang đến cho các bạn một hiệu ứng cho dịp lễ này. Chỉ cần một đoạn script nhỏ sau đây thôi, các bạn sẽ có ngay những bông tuyết rơi xuống ngay trên trang web của bạn.
Bước 1 : Save hình bông tuyết về máy của mình và upload lên server, mình xin đưa ra 1 số hình bông tuyết sau để các bạn tha hồ lựa chọn (nhấp chuột phải và chọn Save Picture As.. :
Và upload hình này để lấy code
Bước 2 : Tạo một file mới, đặt tên là snow.js và copy đoạn code sau vào file này và sau đó upload file .js lên code.google.com
////////////////////////////////////////////////////////////////
// Javascript made by Rasmus - http://www.peters1.dk //
////////////////////////////////////////////////////////////////
var SNOW_Picture = "http://www.domain.com/billeder/snow.gif"
var SNOW_no = 15;
var SNOW_browser_IE_NS = (document.body.clientHeight) ? 1 : 0;
var SNOW_browser_MOZ = (self.innerWidth) ? 1 : 0;
var SNOW_browser_IE7 = (document.documentElement.clientHeight) ? 1 : 0;
var SNOW_Time;
var SNOW_dx, SNOW_xp, SNOW_yp;
var SNOW_am, SNOW_stx, SNOW_sty;
var i, SNOW_Browser_Width, SNOW_Browser_Height;
if (SNOW_browser_IE_NS)
{
SNOW_Browser_Width = document.body.clientWidth;
SNOW_Browser_Height = document.body.clientHeight;
}
else if (SNOW_browser_MOZ)
{
SNOW_Browser_Width = self.innerWidth - 20;
SNOW_Browser_Height = self.innerHeight;
}
else if (SNOW_browser_IE7)
{
SNOW_Browser_Width = document.documentElement.clientWidth;
SNOW_Browser_Height = document.documentElement.clientHeight;
}
SNOW_dx = new Array();
SNOW_xp = new Array();
SNOW_yp = new Array();
SNOW_am = new Array();
SNOW_stx = new Array();
SNOW_sty = new Array();
for (i = 0; i < SNOW_no; ++ i)
{
SNOW_dx[i] = 0;
SNOW_xp[i] = Math.random()*(SNOW_Browser_Width-50);
SNOW_yp[i] = Math.random()*SNOW_Browser_Height;
SNOW_am[i] = Math.random()*20;
SNOW_stx[i] = 0.02 + Math.random()/10;
SNOW_sty[i] = 0.7 + Math.random();
if (i == 0) document.write("<\div id=\"SNOW_flake"+ i +"\" style=\"position: absolute; z-index: "+ i +"; visibility: visible; top: 15px; left: 15px;\"><a href=\"http://www.peters1.dk\" target=\"_blank\"><\img src=\""+SNOW_Picture+"\" border=\"0\"></a><\/div>");
else document.write("<\div id=\"SNOW_flake"+ i +"\" style=\"position: absolute; z-index: "+ i +"; visibility: visible; top: 15px; left: 15px;\"><\img src=\""+SNOW_Picture+"\" border=\"0\"><\/div>");
}
function SNOW_Weather()
{
for (i = 0; i < SNOW_no; ++ i)
{
SNOW_yp[i] += SNOW_sty[i];
if (SNOW_yp[i] > SNOW_Browser_Height-50)
{
SNOW_xp[i] = Math.random()*(SNOW_Browser_Width-SNOW_am[i]-30);
SNOW_yp[i] = 0;
SNOW_stx[i] = 0.02 + Math.random()/10;
SNOW_sty[i] = 0.7 + Math.random();
}
SNOW_dx[i] += SNOW_stx[i];
document.getElementById("SNOW_flake"+i).style.top=SNOW_yp[i]+"px";
document.getElementById("SNOW_flake"+i).style.left=SNOW_xp[i] + SNOW_am[i]*Math.sin(SNOW_dx[i])+"px";
}
SNOW_Time = setTimeout("SNOW_Weather()", 10);
}Bước 3 : Chèn script này vào ngay sau thẻ <body>
<script type="text/javascript" src="http://www.tenmiencuaban.com/scripts/snow.js"></script>Trong file snow.js các bạn nhớ thay đường dẫn hình bông tuyết http://www.domain.com/billeder/snow.gif thành đường dẫn trên host của bạn xem tại đây.
Chúc các bạn thành công !
No comments:
Post a Comment