아래 파란색의 스타일부분의 자바를 수정하시면 포지션 및 시계의 위치가 바뀝니다.
예) <style type="text/css">
body {
position:absolute;
overflow:hidden;
margin:0px;
padding:0px;
background:#222;
left:0;
top:0;
width:100%;
height:100%;
}
img {
position:absolute;
left:-1000px;
}
</style>
|
>> |
예) <style type="text/css">
body {
position:absolute;
overflow:hidden;
margin:0px;
padding:0px;
background:#f3f3f3;
left:6; 왼쪽마진값
top:6; 상단마진값
width:100%;
height:100%;
}
img {
position:absolute;
left:-1000px;
}
</style>
|
아래는 자바스크립트 원문입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title<해피CGI</title>
<style type="text/css">
body {
position:absolute;
overflow:hidden;
margin:0px;
padding:0px;
background:#222;
left:0;
top:0;
width:100%;
height:100%;
}
img {
position:absolute;
left:-1000px;
}
</style>
<script type="text/javascript">
<!--
window.onerror = new Function("return true");
var O=[];
var px=0;
var py=0;
var rx=0;
var ry=0;
var TM=[];
var Tm=[];
var A = 1000;
var crx;
var srx;
var cry;
var sry;
var digits = [
"##### # ########### ########################## ",
"# # # # ## ## # ## ## # ",
"# # # # ## ## # ## ## # # ",
"# # # ##### ################### ########### ",
"# # # # # # ## # ## # # # ",
"# # # # # # ## # ## # # ",
"##### # ########## ########### ########### "
];
function CObj(a,z){
// create led element
this.o=document.createElement("img");
this.o.src=document.getElementById("plot").src;
document.getElementById("clock3D").appendChild(this.o);
this.a=a;
this.z=z;
this.plot=true;
// leds lighting
this.alpha=function(opacity){
with(this){
if(opacity>0){
if(!plot){
plot=true;
o.src=document.getElementById("plot").src;
}
} else {
if(plot){
plot=false;
o.src=document.getElementById("plotR").src;
}
}
}
}
// main 3D function
this.anim=function() {
with (this) {
// z axis rotation
x=Math.sin(A+a)*100;
y=Math.cos(A+a)*100;
// simple 3D
x1=y*crx-z*srx;
zz=y*srx+z*crx;
y1=x*cry-zz*sry;
zz=x*sry+zz*cry;
// 2D projection
r=396/(396+zz);
x=Math.round(150-x1/r);
y=Math.round(100-y1/r);
w=Math.round(2+Math.max(4,zz*.12));
// leds lighting
alpha(zz);
// html positioning
with(o.style){
left=x+"px";
top=y+"px";
width=height=w+"px";
zIndex=Math.round(1000+zz);
}
}
}
}
function mainloop() {
// rotations
A-=Math.PI/40;
rx+=px;
ry+=py;
crx=Math.cos(rx);
srx=Math.sin(rx);
cry=Math.cos(ry+Math.PI/2);
sry=Math.sin(ry+Math.PI/2);
// return to the horizontale
rx*=.98;
ry*=.98;
px*=.98;
py*=.98;
// refresh time
k=0;
for(var i=0;i<6;i++){
if(TM[i]!=Tm[i]){
Tm[i]=TM[i];
// destroy objects
for(var j in O[k].O)document.getElementById("clock3D").removeChild(O[k].O[j].o);
delete O[k];
// create new digit
O[k] = new Cdigit(k, TM[i]);
}
k+=(i==1 || i==3)?2:1;
}
// call animation
for(var i in O){
for(var j in O[i].O){
O[i].O[j].anim();
}
}
setTimeout("mainloop();",16);
}
function Cdigit(N,d){
// digit prototype
this.O = [];
for(var i=0;i<7;i++){
for(var j=0;j<5;j++){
c=digits[i].charAt(5*d+j);
if(c!=" "){
a = ((32*N)+(j*5))/(180/Math.PI);
this.O.push(new CObj(a,-42+i*12));
}
}
}
}
function time(){
// HH:MM:SS
T = new Date();
h = T.getHours();
m = T.getMinutes();
s = T.getSeconds();
TM = [
Math.floor(h/10),
h%10,
Math.floor(m/10),
m%10,
Math.floor(s/10),
s%10
];
setTimeout("time()" ,1000);
}
/* resize (standard mode) */
function resize(){
nx = document.documentElement.clientWidth/2;
ny = document.documentElement.clientHeight/2;
if(ny==0)ny = document.body.clientHeight/2;
}
onresize = resize;
/* mouse move */
document.onmousemove = function(e){
if(window.event) e=window.event;
xm=(e.x || e.clientX);
ym=(e.y || e.clientY);
px=(xm-nx)/(nx*5);
py=(ym-ny)/(ny*5);
}
onload = function () {
// initializations
time();
resize();
var k=0;
for(var i=0;i<6;i++){
O[k] = new Cdigit(k++, TM[i]);
if(i==1 || i==3) O[k] = new Cdigit(k++, 10);
}
mainloop();
}
//-->
</script>
</head>
<body>
<span id="clock3D" style="overflow:hidden"></span>
<img id="plot" src="http://www.blueb.co.kr/SRC/javascript/image4/plot.gif" style="visibility:hidden">
<img id="plotR" src="http://www.blueb.co.kr/SRC/javascript/image4/plotR.gif" style="visibility:hidden">
</body>
</html>
|
