Admin Admin
Tổng số bài gửi : 186 Join date : 30/11/2010 Age : 28 Đến từ : Cà Mau Việt Nam
| Tiêu đề: Javascript - Một số hiệu ứng tuyết rơi cho web Tue Dec 07, 2010 9:02 am | |
| 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 - Code:
-
<script> // 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("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>") } if (browserok) { window.onload=initsnow } </script> 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 - Code:
-
<script> 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;"><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);
}
SNOW_Weather(); </script> 3 - Hiệu ứng 3 - Hiệu ứng tuyết bay theo chiều gió (bay theo con trỏ chuột) - Code:
-
<script type="text/javascript" name="snow.js"> 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 id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:' +sfs[i]+'px;height:'+sfs[i]+'px;background-color:#ffffff;font-size:'+sfs[i]+'px"><\/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. </script>
| |
|