[37]
Thủ thuật: Sao rơi theo trỏ chuột
Nguồn: Sưu tầm



Giới thiệu: Rà chuột tới đâu, sao rơi lung linh tới đó. Một hiệu ứng có đã khá lâu nhưng dùng vẫn rất đẹp. Đây là hiệu ứng mình rất thích. Đặc biệt nếu dùng cho nền tối, chọn màu trắng cho sao thì trông sẽ như tuyết rơi vậy :)

Khuyết điểm duy nhất là không được mượt lắm trên IE. Thêm nữa là: sẽ làm giãn bề rộng hay chiều cao blog nếu ta rà chuột ra biên, hay mép blog.


CÁCH THỰC HIỆN

1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML

3. Chèn script.

Bước 1: Tìm thẻ đóng </head>

- Thêm vào trước nó đoạn mã sau:

<!-- Sao rơi theo trỏ chuột -->
<script type='text/javascript'> 
// <![CDATA[ 
var colour="#EF6B7B"; // Mã màu sao rơi
var sparkles=80; 
var x=ox=400; 
var y=oy=300; 
var swide=800; 
var shigh=600; 
var sleft=sdown=0; 
var tiny=new Array(); 
var star=new Array(); 
var starv=new Array(); 
var starx=new Array(); 
var stary=new Array(); 
var tinyx=new Array(); 
var tinyy=new Array(); 
var tinyv=new Array(); 

window.onload=function() { if (document.getElementById) { 

var i, rats, rlef, rdow; 

for (var i=0; i<sparkles; i++) { 

var rats=createDiv(3, 3); 

rats.style.visibility="hidden"; 

document.body.appendChild(tiny[i]=rats); 

starv[i]=0; 

tinyv[i]=0; 

var rats=createDiv(5, 5); 

rats.style.backgroundColor="transparent"; 

rats.style.visibility="hidden"; 

var rlef=createDiv(1, 5); 

var rdow=createDiv(5, 1); 

rats.appendChild(rlef); 

rats.appendChild(rdow); 

rlef.style.top="2px"; 

rlef.style.left="0px"; 

rdow.style.top="0px"; 

rdow.style.left="2px"; 

document.body.appendChild(star[i]=rats);}set_width(); 

sparkle();}} 

function sparkle() {var c; 

if (x!=ox || y!=oy) { 

ox=x;oy=y; 

for (c=0; c<sparkles; c++) if (!starv[c]) { 

star[c].style.left=(starx[c]=x)+"px"; 

star[c].style.top=(stary[c]=y)+"px"; 

star[c].style.clip="rect(0px, 5px, 5px, 0px)"; 

star[c].style.visibility="visible"; 

starv[c]=50; 

break;}}for (c=0; c<sparkles; c++) { 

if (starv[c]) update_star(c); 

if (tinyv[c]) update_tiny(c);} 

setTimeout("sparkle()", 40);}function update_star(i) { 

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; 

if (starv[i]) { 

stary[i]+=1+Math.random()*3; 

if (stary[i]<shigh+sdown) { 

star[i].style.top=stary[i]+"px"; 

starx[i]+=(i%5-2)/5; 

star[i].style.left=starx[i]+"px";}else { 

star[i].style.visibility="hidden"; 

starv[i]=0; 

return;}}else {tinyv[i]=50; 

tiny[i].style.top=(tinyy[i]=stary[i])+"px"; 

tiny[i].style.left=(tinyx[i]=starx[i])+"px"; 

tiny[i].style.width="2px"; 

tiny[i].style.height="2px"; 

star[i].style.visibility="hidden"; 

tiny[i].style.visibility="visible"}} 

function update_tiny(i) { 

if (--tinyv[i]==25) { 

tiny[i].style.width="1px"; 

tiny[i].style.height="1px";} 

if (tinyv[i]) { 

tinyy[i]+=1+Math.random()*3; 

if (tinyy[i]<shigh+sdown) { 

tiny[i].style.top=tinyy[i]+"px"; 

tinyx[i]+=(i%5-2)/5; 

tiny[i].style.left=tinyx[i]+"px";}else { 

tiny[i].style.visibility="hidden"; 

tinyv[i]=0; 

return;}}else tiny[i].style.visibility="hidden";} 

document.onmousemove=mouse; 

function mouse(e) { 

set_scroll(); 

y=(e)?e.pageY:event.y+sdown; 

x=(e)?e.pageX:event.x+sleft;} 

function set_scroll() { 

if (typeof(self.pageYOffset)=="number") { 

sdown=self.pageYOffset; 

sleft=self.pageXOffset;} 

else if (document.body.scrollTop || document.body.scrollLeft) { 

sdown=document.body.scrollTop; 

sleft=document.body.scrollLeft;} 

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { 

sleft=document.documentElement.scrollLeft; 

sdown=document.documentElement.scrollTop;}else {sdown=0;sleft=0;}} 

window.onresize=set_width; 

function set_width() { 

if (typeof(self.innerWidth)=="number") { 

swide=self.innerWidth; 

shigh=self.innerHeight;} 

else if (document.documentElement && document.documentElement.clientWidth) { 

swide=document.documentElement.clientWidth; 

shigh=document.documentElement.clientHeight;}else if (document.body.clientWidth) { 

swide=document.body.clientWidth; 

shigh=document.body.clientHeight;}} 

function createDiv(height, width) { 

var div=document.createElement("div"); 

div.style.position="absolute"; 

div.style.height=height+"px"; 

div.style.width=width+"px"; 

div.style.overflow="hidden"; 

div.style.backgroundColor=colour; 

return (div);}
// ]]> 
</script>

Bước 2: Save template. (Lưu mẫu)

THE END.