19 June 2011

Tutorial Sparkling Cursor



Satu hari lagi sebelum sekolah , dan Daya sedang menikmati Chocolate Sundae .. urmmm sedap sedap sedap ..haha

Ape yang Daya cube tunjuk kan hari ni ? Korang nampak tak bintang kecik kecik yang jatuh bila cursor Daya bergerak ?

Itulah yang akan Daya ajar pada petang yang indah sangat ni ~

Jum mula .........

 Dashboard -> Design -> Add Gadget -> Html/JavaScript

 Copy paste code dekat bawah ni dalam ruangan Html?JavaScript tadi ..Maaf ye panjang sikit..

<script type='text/javascript'> 
// <![CDATA[ 
var colour="WARNA YANG KORANG NAK"; 
var sparkles=100; 

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="3px"; 
rlef.style.left="0px"; 
rdow.style.top="0px"; 
rdow.style.left="3px"; 
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>

 Yang warna merah tu korang gantikan dengan warna yang korang nak ..Contoh macam pink , red ataupun black ..okey ? faham kan ? GoodGood !

 Bila dah siap , tinggal satu langkah yang paling penting iaitu SAVE ..ehehe



1 comment:

Nur Fatihah's said...

kak , susah lah nak buat blog cantik macam dulu sebabsekarang saya guna blogskin . Susah nak add gadget and ape ape tu lah . Cam mane ek ?