Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.
Tìm kiếm
 
 

Display results as :
 


Rechercher Advanced Search

Affiliates
free forum


Javascript - Một số hiệu ứng tuyết rơi cho web

Go down

28032011

Bài gửi 

Javascript - Một số hiệu ứng tuyết rơi cho web  Empty 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 )
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.


Admin
Admin
Admin

Tổng số bài gửi : 261
Join date : 20/03/2011
Age : 28
Đến từ : Bình Dương

https://giaitricntt.forumvi.com

Về Đầu Trang Go down

Share this post on: redditgoogle

 
Permissions in this forum:
Bạn không có quyền trả lời bài viết