Similar topics
Tìm kiếm
Latest topics
Javascript - Một số hiệu ứng tuyết rơi cho web
Trang 1 trong tổng số 1 trang
28032011
Javascript - Một số hiệu ứng tuyết rơi cho web
1 - Hiệu ứng 1
- Hiệu ứng tuyết rơi sử dụng dấu * để làm tuyết, có thể thay đổi kích cỡ, màu sắc ở phần config
Coppy đoạn code bên dưới và chèn vào dưới thẻ trong trang web của bạn
// CREDITS: // Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Distributed by http://www.hypergurl.com // Permission given to use the script
on webpages provided that this notice remains as is. // Set the number of snowflakes
(more than 30 - 40 not recommended) var snowmax=35 // Set the colors for the snow.
Add as many colors as you like var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")
// Set the fonts, that create the snowflakes. Add as many fonts as you like var
snowtype=new Array("Arial Black","Arial Narrow","Times","Comic
Sans MS") // Set the letter that creates your snowflake (recommended:*) var
snowletter="*" // Set the speed of sinking (recommended values range
from 0.3 to 2) var sinkspeed=0.6 // Set the maximal-size of your snowflaxes var
snowmaxsize=22 // Set the minimal-size of your snowflaxes var snowminsize=8 //
Set the snowing-zone // Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing var snowingzone=3 ///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE ///////////////////////////////////////////////////////////////////////////
// Do not edit below this line var snow=new Array() var marginbottom var marginright
var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new
Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random())
return rand } function initsnow() { if (ie5 || opera) { marginbottom = document.body.clientHeight
marginright = document.body.clientWidth } else if (ns6) { marginbottom = window.innerHeight
marginright = window.innerWidth } var snowsizerange=snowmaxsize-snowminsize for
(i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i]
= 0.03 + Math.random()/10; snow[i]=document.getElementById("s"+i) snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size
snow[i].style.color=snowcolor[randommaker(snowcolor.length)] snow[i].sink=sinkspeed*snow[i].size/5
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2)
{snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx
snow[i].style.top=snow[i].posy } movesnow() } function movesnow() { for (i=0;i<=snowmax;i++)
{ crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
snow[i].style.top=snow[i].posy if (snow[i].posy>=marginbottom-2*snow[i].size
|| parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){ if (snowingzone==1)
{snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=0 } } var timer=setTimeout("movesnow()",50) } for (i=0;i<=snowmax;i++)
{ document.write(""+snowletter+"")
} if (browserok) { window.onload=initsnow }
2 - Hiệu ứng 2
- Hiệu ứng tuyết rơi sử dụng ảnh
- Tải hình ảnh tuyết rơi ở đây ( có nhiều kiểu để chọn )
http://www.mediafire.com/?g79le58ol8o5rer
var SNOW_Picture = "/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;\"><\img src=\""+SNOW_Picture+"\" border=\"0\"><\/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);
}
SNOW_Weather();
3 - Hiệu ứng 3
- Hiệu ứng tuyết bay theo chiều gió (bay theo con trỏ chuột)
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configure here.
var num = 60; //Number of flakes
var timer = 30; //setTimeout speed. Varies on different comps
//End.
var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
if (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
num = 12;
for (i = 0; i < num; i++){
sfs[i] = Math.round(1 + Math.random() * 1);
document.write('
- Hiệu ứng tuyết rơi sử dụng dấu * để làm tuyết, có thể thay đổi kích cỡ, màu sắc ở phần config
Coppy đoạn code bên dưới và chèn vào dưới thẻ trong trang web của bạn
// CREDITS: // Snowmaker Copyright (c) 2003 Peter Gehrig. All rights reserved.
// Distributed by http://www.hypergurl.com // Permission given to use the script
on webpages provided that this notice remains as is. // Set the number of snowflakes
(more than 30 - 40 not recommended) var snowmax=35 // Set the colors for the snow.
Add as many colors as you like var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")
// Set the fonts, that create the snowflakes. Add as many fonts as you like var
snowtype=new Array("Arial Black","Arial Narrow","Times","Comic
Sans MS") // Set the letter that creates your snowflake (recommended:*) var
snowletter="*" // Set the speed of sinking (recommended values range
from 0.3 to 2) var sinkspeed=0.6 // Set the maximal-size of your snowflaxes var
snowmaxsize=22 // Set the minimal-size of your snowflaxes var snowminsize=8 //
Set the snowing-zone // Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing var snowingzone=3 ///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE ///////////////////////////////////////////////////////////////////////////
// Do not edit below this line var snow=new Array() var marginbottom var marginright
var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new
Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera function randommaker(range) { rand=Math.floor(range*Math.random())
return rand } function initsnow() { if (ie5 || opera) { marginbottom = document.body.clientHeight
marginright = document.body.clientWidth } else if (ns6) { marginbottom = window.innerHeight
marginright = window.innerWidth } var snowsizerange=snowmaxsize-snowminsize for
(i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i]
= 0.03 + Math.random()/10; snow[i]=document.getElementById("s"+i) snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size
snow[i].style.color=snowcolor[randommaker(snowcolor.length)] snow[i].sink=sinkspeed*snow[i].size/5
if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2)
{snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx
snow[i].style.top=snow[i].posy } movesnow() } function movesnow() { for (i=0;i<=snowmax;i++)
{ crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
snow[i].style.top=snow[i].posy if (snow[i].posy>=marginbottom-2*snow[i].size
|| parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){ if (snowingzone==1)
{snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
snow[i].posy=0 } } var timer=setTimeout("movesnow()",50) } for (i=0;i<=snowmax;i++)
{ document.write(""+snowletter+"")
} if (browserok) { window.onload=initsnow }
2 - Hiệu ứng 2
- Hiệu ứng tuyết rơi sử dụng ảnh
- Tải hình ảnh tuyết rơi ở đây ( có nhiều kiểu để chọn )
http://www.mediafire.com/?g79le58ol8o5rer
var SNOW_Picture = "/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;\"><\img src=\""+SNOW_Picture+"\" border=\"0\"><\/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);
}
SNOW_Weather();
3 - Hiệu ứng 3
- Hiệu ứng tuyết bay theo chiều gió (bay theo con trỏ chuột)
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configure here.
var num = 60; //Number of flakes
var timer = 30; //setTimeout speed. Varies on different comps
//End.
var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
if (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
num = 12;
for (i = 0; i < num; i++){
sfs[i] = Math.round(1 + Math.random() * 1);
document.write('
<\/div>');
currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}
if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh - 2;
w = rw - 2;
}
else{
h = r.clientHeight - 2;
w = r.clientWidth - 2;
}
}
function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function snow(){
var dy,dx;
for (i = 0; i < num; i++){
dy = fall[i];
dx = fall[i] * Math.cos(currStep[i]);
y[i]+=dy;
x[i]+=dx;
if (x[i] >= w || y[i] >= h){
y[i] = -10;
x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}
theFlakes[i].top = y[i] + scrl(0) + pix;
theFlakes[i].left = x[i] + scrl(1) + pix;
currStep[i]+=step[i];
}
setTimeout(snow,timer);
}
function init(){
winsize();
for (i = 0; i < num; i++){
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
}
snow();
}
if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}
})();
}//End.
currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}
if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh - 2;
w = rw - 2;
}
else{
h = r.clientHeight - 2;
w = r.clientWidth - 2;
}
}
function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function snow(){
var dy,dx;
for (i = 0; i < num; i++){
dy = fall[i];
dx = fall[i] * Math.cos(currStep[i]);
y[i]+=dy;
x[i]+=dx;
if (x[i] >= w || y[i] >= h){
y[i] = -10;
x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}
theFlakes[i].top = y[i] + scrl(0) + pix;
theFlakes[i].left = x[i] + scrl(1) + pix;
currStep[i]+=step[i];
}
setTimeout(snow,timer);
}
function init(){
winsize();
for (i = 0; i < num; i++){
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
}
snow();
}
if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}
})();
}//End.
Similar topics
» Trillian Astra Pro v4.2 | Chat tuyệt đỉnh trên máy tính
» 4 loại nước trị mụn cực hiệu quả
» Cách khử mùi trong nhà đơn giản và hiệu quả
» 4 loại nước trị mụn cực hiệu quả
» Cách khử mùi trong nhà đơn giản và hiệu quả
Permissions in this forum:
Bạn không có quyền trả lời bài viết
|
|
Wed Apr 08, 2015 8:34 am by bonnuoc1
» Những điều cấm kỵ khi uống nước cam
Mon Apr 06, 2015 8:33 am by bonnuoc1
» Những loại cây trồng có tác dụng hút khí độc trong nhà
Tue Mar 31, 2015 8:40 am by bonnuoc1
» Mẹo hay trị nghẹt mũi nhanh chóng
Mon Mar 30, 2015 8:17 am by bonnuoc1
» Cách khử mùi trong nhà đơn giản và hiệu quả
Fri Mar 27, 2015 9:33 am by cuatu2
» Công dụng của rắn mối trị hen suyễn
Wed Mar 25, 2015 8:10 am by bonnuoc1
» Mẹo trị sẹo lồi nhờ rau má
Mon Mar 09, 2015 8:55 am by bonnuoc1
» Những điều cần biết khi ăn dưa hấu
Fri Mar 06, 2015 8:59 am by cuatu2
» Cách trị thâm quầng mắt tại nhà
Wed Jan 28, 2015 8:32 am by bonnuoc1