周末闲在家确实无聊。宅的不成样子了。偶然发现国外一个web设计的网站上有一个3D时钟。顿时来了兴趣。其实一看代码，不是svg，也不是canvas，而是简单的利用层级关系，大小关系作了一个视觉差。看起来会有立体运动的感觉。
于是，借着源码，我稍微把它整理一下，利用闭包规避了它大量的全局变量，稍微封装了一下，增加了几项可配置性。觉得好玩，分享给大家。
这个效果主要有两个核心的变换，一个是时钟整体圆周的变化，一个是组成时钟的小元素的位置和层级的变化。
核心变换代码主要有两段：
mainloop: function () {
// rotations
_dir == 'left' ? A-=0.1 : A+=0.1;
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*=.9; ry*=.9; px*=.9; py*=.9;
// refresh time
.
.
.
// call animation
for(var i in O){
for(var j in O[i].O){
O[i].O[j].anim();
}
}
setTimeout(arguments.callee,32);
}
然后结合anim()，可以造出圆环的效果。
// main 3D function
CObj.prototype.anim=function() {
// z axis rotation
var x=Math.sin(A+this.a)*100;
var y=Math.cos(A+this.a)*100;
// simple 3D
var x1=y*crx-this.z*srx;
var zz=y*srx+this.z*crx;
var y1=x*cry-zz*sry;
zz=x*sry+zz*cry;
// 2D projection
var r=400/(400+zz);
x=Math.round(150-x1/r);
y=Math.round(100-y1/r);
var w=Math.round(2+Math.max(4,zz*.07));
// leds lighting
this.alpha(zz);
// html positioning
var css = this.o.style;
css.left=x+"px";
css.top=y+"px";
css.width=css.height=w+"px";
css.zIndex=Math.round(1000+zz);
}
里面嵌杂了一些亮灰度的变化和层级大小的变化就不细说了。大概思路是这样。
不仅3D的处理有创意，时间的组成也有创意，用了一个数组模拟了1~9的数字：
var digits = [
"##### # ########### ########################## ",
"# # # # ## ## # ## ## # ",
"# # # # ## ## # ## ## # # ",
"# # # ##### ################### ########### ",
"# # # # # # ## # ## # # # ",
"# # # # # # ## # ## # # ",
"##### # ########## ########### ########### "
]
然后可以把组成数字的#号替换成想要的元素，可以是小图片，也可以是其他。然后每次循环的时候根据时间的数字让数组里的#拼凑成当前所需的数字。
function Cdigit(N,d){
// digit prototype
this.O = [];
for(var i=0;i<7;i++){
for(var j=0;j<5;j++){
if(digits[i].charAt(5*d+j)!=" "){
this.O.push(
new CObj((
...
)
);
}
}
}
}
基本思路就是这样子，然后在主循环里每次刷新时间的时候移除上一次的元素，重新拼凑就可以了。没有实例上面的话都是白说，还是给大家看看实例吧。（我只是做了稍微的封装，核心代码并没有改动原作者的）,代码运行有问题的同学请自行拷到本地运行。(使用chrome的需拷到本地运行)
调用方式：
<div id="clock3D"></div>
<script type="text/javascript"><!--
new clock3D({
id: 'clock3D',
direction: 'right' // or 'left'
});
// --></script>
【附赠】
另外，附赠一个昨晚上随便写的一个仿twitter/新浪微博首页的 自动无缝滚动效果。
调用方式：
<script type="text/javascript">
new slider({
id:'slider', //必选：滚动ul的id
auto:4 //可选，滚动间隙，默认3秒
})
</script>