[ New messages · Members · Forum rules · Search · RSS ]
  • Page 1 of 1
  • 1
Diễn đàng » CÔNG NGHỆ THÔNG TIN » WEB » Hiệu ứng tuyết bay theo chiều gió (bay theo con trỏ chuột)
Hiệu ứng tuyết bay theo chiều gió (bay theo con trỏ chuột)
Duy_Khánhngày: Thứ Hai, 2012-04-09, 7:28 PM | Message # 1
Thành viên cấp 10
nhóm: Administrators
Tin nhắn: 977
Danh tiếng: 6
Trạng thái: Offline
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>


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>


Thông báo: Tài khoản có sẵn cho thành viên
 
Diễn đàng » CÔNG NGHỆ THÔNG TIN » WEB » Hiệu ứng tuyết bay theo chiều gió (bay theo con trỏ chuột)
  • Page 1 of 1
  • 1
Search: