Pada artikel ini saya akan
menjelaskan tentang membuat jam analog melayang di udara
Web
anda akan lebih tampak keren dengan adanya jam melayang-layang di website anda.
Sebelum
sobat membaca artikel ini atau ingin memahaminya saya sarankan kepada
sobatuntuk menyiapkan secangkir kopi dan makanan ringan agar anda tidak jenuh
dalam memahami artikel ini,karena artikel ini cukup banyak.
Basa-basinya
cukup sampai disini saja kita langsung aja ke pokok-pokok pentingnya oke gan.
Copy
dan paste script dibawah ini:
<script
type="text/javascript">
// <![CDATA[
var second_hand_colour="#ff0000"; //
warna jarum saat
var minute_hand_colour="#0f0"; //
warna jarum minit
var hour_hand_colour="#ff0"; //
warna jarum jam
var facia_colour="#fff"; // warna no
jam
var face_colour="#FFFFCC"; //warna
background jam
var xoffset=65; // jarak horizotal mouse dan
jam
var yoffset=65; // jarak vertikal mouse dan
jam
var size=122; // saiz jam
/****************************
*
Analogue Clock Effect *
* (c)2006 mf2fm web-design *
*
http://www.mf2fm.com/rv *
* Tutorial by polskahackrew *
****************************/
var facia=String.fromCharCode(9660)+" 1 2
"+String.fromCharCode(9668)+" 4 5
"+String.fromCharCode(9650)+" 7 8 "+String.fromCharCode(9658)+"
10 11"; // characters to use for face, starting at '12' position
var clok;
var newx=xmo=400;
var newy=ymo=300;
window.onload=function() { if
(document.getElementById) {
var i,
j, k;
clok=document.createElement("div");
clok.style.position="absolute";
if
(face_colour!="transparent") for (i=0; i<size; i++) {
j=createDiv(false, face_colour);
if
(document.all) j.style.filter="Alpha(Opacity=50)";
else j.style.opacity=0.5;
k=size*Math.sqrt(i/size-Math.pow(i/size, 2));
j.style.left=size/2-k+"px";
j.style.top=i+"px";
j.style.height="1px";
j.style.width=k*2+"px";
clok.appendChild(j);
}
for
(i=1; i<size/4; i++) {
j=createDiv("sec"+i, second_hand_colour);
j.style.height="2px";
j.style.width="2px";
clok.appendChild(j);
}
for
(i=1; i<size/4; i++) {
j=createDiv("min"+i, minute_hand_colour);
j.style.height="3px";
j.style.width="3px";
clok.appendChild(j);
}
for
(i=0; i<size/6; i++) {
j=createDiv("hour"+i, hour_hand_colour);
j.style.height="4px";
j.style.width="4px";
if
(!i) j.style.top=j.style.left=size/2-2+"px";
clok.appendChild(j);
}
facia=facia.split(" ");
for
(i=0; i<12; i++) {
j=createDiv(false, "transparent");
j.style.color=facia_colour;
j.style.font="bold 10pt monospace";
j.style.overflow="visible";
j.appendChild(document.createTextNode(facia[i]));
j.style.top=size/2-7-size/2*Math.cos(i*Math.PI/6)+"px";
j.style.left=size/2-5+size/2*Math.sin(i*Math.PI/6)+"px";
clok.appendChild(j);
}
document.body.appendChild(clok);
tick();
tock();
}}
function tick() {
var i,
j;
var
now=new Date();
var
sec=(now.getSeconds()+(now.getMilliseconds()%1000)/1000)*Math.PI/30;
for
(i=1; i<size/4; i++) {
j=document.getElementById("sec"+i).style;
j.left=size/2+2*i*Math.sin(sec)-1+"px";
j.top=size/2-2*i*Math.cos(sec)-1+"px";
}
xmo+=Math.floor((newx-xmo)/4);
clok.style.left=xmo+"px";
ymo+=Math.floor((newy-ymo)/4);
clok.style.top=ymo+"px";
setTimeout("tick()", 40);
}
function tock() {
var i,
j;
var
now=new Date();
var
min=(now.getMinutes()+now.getSeconds()/60)*Math.PI/30;
var
hrs=(now.getHours()+now.getMinutes()/60)*Math.PI/6
for
(i=1; i<size/4; i++) {
j=document.getElementById("min"+i).style;
j.left=size/2+2*i*Math.sin(min)-1.5+"px";
j.top=size/2-2*i*Math.cos(min)-1.5+"px";
}
for
(i=1; i<size/6; i++) {
j=document.getElementById("hour"+i).style;
j.left=size/2+2*i*Math.sin(hrs)-2+"px";
j.top=size/2-2*i*Math.cos(hrs)-2+"px";
}
setTimeout("tock()", 999);
}
document.onmousemove=mouse;
function mouse(e) {
newy=yoffset-size/2+((e)?e.pageY:event.y+scro());
newx=xoffset-size/2+((e)?e.pageX:event.x);
}
function scro() {
var
scro=0;
if
(document.body.scrollTop) scro=document.body.scrollTop;
else
if (document.documentElement && document.documentElement.scrollTop)
scro=document.documentElement.scrollTop;
return
(scro);
}
function createDiv(id, bg) {
var
div=document.createElement("div");
div.style.position="absolute";
div.style.overflow="hidden";
div.style.backgroundColor=bg;
if
(id) div.setAttribute("id", id);
return
(div);
}
// ]]>
</script>
