Menampilkan Animasi Jam Pada Cursor Mouse

walk-02Berikut ini adalah code (berbasis JavaScripts) untuk menampilkan animasi yang cukup menarik
berupa sebuah jam didekat cursor mouse anda yang menampil tanggal Hari, tanggal, bulan, tahun yang berputar
beserta jam…. cukup bagus untuk dicoba

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<SCRIPT language=JavaScript>
 
dCol='BBBBBB';//date colour.
 
fCol='666666';//face colour.
 
sCol='AACCFF';//seconds colour.
 
mCol='000000';//minutes colour.
 
hCol='000000';//hours colour.
 
ClockHeight=40;
 
ClockWidth=40;
 
ClockFromMouseY=0;
 
ClockFromMouseX=100;
 
 
 
d=new Array("MINGGU","SENIN","SELASA","RABU","KAMIS","JUMAT","SABTU");
 
m=new Array("JANUAR1","FEBRUAR1","MARET","APRIL","MEI","JUNI","JULI","AGUSTUS","SEPTEMBER","OKTOBER","NOVEMBER","DESEMBER");
 
date=new Date();
 
day=date.getDate();
 
year=date.getYear();
 
if (year < 2000) year=year+1900;
 
TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year;
 
D=TodaysDate.split('');
 
H='...';
 
H=H.split('');
 
M='....';
 
M=M.split('');
 
S='.....';
 
S=S.split('');
 
Face='1 2 3 4 5 6 7 8 9 10 11 12';
 
font='Arial';
 
size=1;
 
speed=0.6;
 
ns=(document.layers);
 
ie=(document.all);
 
Face=Face.split(' ');
 
n=Face.length;
 
a=size*10;
 
ymouse=0;
 
xmouse=0;
 
scrll=0;
 
props="<font face="+font+" size="+size+" color="+fCol+"><B>";
 
props2="<font face="+font+" size="+size+" color="+dCol+"><B>";
 
Split=360/n;
 
Dsplit=360/D.length;
 
HandHeight=ClockHeight/4.5
 
HandWidth=ClockWidth/4.5
 
HandY=-7;
 
HandX=-2.5;
 
scrll=0;
 
step=0.06;
 
currStep=0;
 
y=new Array();x=new Array();Y=new Array();X=new Array();
 
for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
 
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
 
for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
 
if (ns){
 
for (i=0; i < D.length; i++)
 
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
 
for (i=0; i < n; i++)
 
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
 
for (i=0; i < S.length; i++)
 
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
 
for (i=0; i < M.length; i++)
 
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
 
for (i=0; i < H.length; i++)
 
document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
 
}
 
if (ie){
 
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
 
for (i=0; i < D.length; i++)
 
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>');
 
document.write('</div></div>');
 
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
 
for (i=0; i < n; i++)
 
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>');
 
document.write('</div></div>');
 
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
 
for (i=0; i < H.length; i++)
 
document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
 
document.write('</div></div>');
 
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
 
for (i=0; i < M.length; i++)
 
document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
 
document.write('</div></div>')
 
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
 
for (i=0; i < S.length; i++)
 
document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
 
document.write('</div></div>')
 
}
 
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
 
function Mouse(evnt){
 
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
 
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
 
}
 
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
 
function ClockAndAssign(){
 
time = new Date ();
 
secs = time.getSeconds();
 
sec = -1.57 + Math.PI * secs/30;
 
mins = time.getMinutes();
 
min = -1.57 + Math.PI * mins/30;
 
hr = time.getHours();
 
hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360;
 
if (ie){
 
Od.style.top=window.document.body.scrollTop;
 
Of.style.top=window.document.body.scrollTop;
 
Oh.style.top=window.document.body.scrollTop;
 
Om.style.top=window.document.body.scrollTop;
 
Os.style.top=window.document.body.scrollTop;
 
}
 
for (i=0; i < n; i++){
 
 var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
 
 F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll;
 
 F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180);
 
 }
 
for (i=0; i < H.length; i++){
 
 var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
 
 HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
 
 HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
 
 }
 
for (i=0; i < M.length; i++){
 
 var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
 
 ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
 
 ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
 
 }
 
for (i=0; i < S.length; i++){
 
 var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
 
 SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
 
 SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
 
 }
 
for (i=0; i < D.length; i++){
 
 var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
 
 DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll;
 
 DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180);
 
 }
 
currStep-=step;
 
}
 
function Delay(){
 
scrll=(ns)?window.pageYOffset:0;
 
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
 
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
 
for (i=1; i < D.length; i++){
 
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
 
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
 
}
 
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
 
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
 
for (i=1; i < n; i++){
 
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
 
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
 
}
 
ClockAndAssign();
 
setTimeout('Delay()',20);
 
}
 
if (ns||ie)window.onload=Delay;
 
</SCRIPT>
 
 
</head>
 
<body>
</body>
</html>

Selamat mencoba
Mau download listing codenya? boleh, downloadsKlik Disini untuk download. Untuk melihat hasilnya di browser, klik disini

16 thoughts on “Menampilkan Animasi Jam Pada Cursor Mouse”

  1. maaf ini code ini bukan buatan saya, saya ambil di internet namun lupa di mana alamatnya..he.he.he
    selamat mencoba maaf ini code ini bukan buatan saya, saya ambil di internet namun lupa di mana alamatnya..he.he.he

    selamat mencoba !!! (smoga yang punya kode kagak marah)

    :repost:

  2. Pingback: ymouse

Leave a Reply

Your email address will not be published. Required fields are marked *

[+] kaskus emoticons nartzco

What is 3 + 14 ?
Please leave these two fields as-is: