我们缺的不是技术，而是创意...

by 岑安

at 2010-11-14 16:33:00

original http://www.cnblogs.com/hongru/archive/2010/11/14/1876990.html

　　周末闲在家确实无聊。宅的不成样子了。偶然发现国外一个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的需拷到本地运行)

<!DOCTYPE HTML> <html> <head> <title>clock3D</title> <style type="text/css" _mce_bogus="1"></style> <script type="text/javascript"></script> </head> <body> <div id="clock3D"></div> <script type="text/javascript"></script> </body> </html>

调用方式：

<div id="clock3D"></div> 
<script type="text/javascript"><!--
    new clock3D({
        id: 'clock3D',
        direction: 'right' // or 'left'
    }); 
// --></script>

【附赠】

另外，附赠一个昨晚上随便写的一个仿twitter/新浪微博首页的自动无缝滚动效果。

<!doctype html> <html> <head> <title>tweets-slide</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" _mce_bogus="1"></style> <script type="text/javascript"></script> </head> <body> <div class="wp"> <ul id="slider" class="slider"> <li><a class="fl" href="javascript:;" _mce_href="http://javascript:;"><img src="http://pic.cnblogs.com/face/u160412.jpg" _mce_src="http://pic.cnblogs.com/face/u160412.jpg" alt="" /></a> <p>曾虑多情损梵行　　入山又恐别倾城　　世间安得双全法　　不负如来不负卿</p> </li> <li><a class="fl" href="javascript:;" _mce_href="http://javascript:;"><img src="http://pic.cnblogs.com/face/u160412.jpg" _mce_src="http://pic.cnblogs.com/face/u160412.jpg" alt="" /></a> <p>第一最好不相见，如此便可不相恋。第二最好不相知，如此便可不相思。<br/> 第三最好不相伴，如此便可不相欠。第四最好不相惜，如此便可不相忆。<br/> 第五最好不相爱，如此便可不相弃。第六最好不相对，如此便可不相会。 <br/> 第七最好不相误，如此便可不相负。第八最好不相许，如此便可不相续。<br/> 第九最好不相依，如此便可不相偎。第十最好不相遇，如此便可不相聚。<br/> 但曾相见便相知，相见何如不见时。安得与君相诀绝，免教生死作相思。</p> </li> <li><a class="fl" href="javascript:;" _mce_href="http://javascript:;"><img src="http://pic.cnblogs.com/face/u160412.jpg" _mce_src="http://pic.cnblogs.com/face/u160412.jpg" alt="" /></a> <p>那一天闭目在经殿香雾中蓦然听见你颂经中的真言那一月我摇动所有的转经筒不为超度只为触摸你的指尖那一年磕长头匍匐在山路不为觐见只为贴着你的温暖那一世转山转水转佛塔啊不为修来生只为途中与你相见只是就在那一夜我忘却了所有抛却了信仰舍弃了轮回只为那曾在佛前哭泣的玫瑰早已失去旧日的光泽 </p> </li> <li><a class="fl" href="javascript:;" _mce_href="http://javascript:;"><img src="http://pic.cnblogs.com/face/u160412.jpg" _mce_src="http://pic.cnblogs.com/face/u160412.jpg" alt="" /></a> <p>班扎古鲁白玛的沉默　　　　你见或者不见我　　　　我就在那里　　　　不悲不喜　　　　　　　　你念或者不念我　　　　情就在那里　　　　不来不去　　　　　　　　你爱或者不爱我　　　　爱就在那里　　　　不增不减　　　　　　　　你跟或者不跟我　　　　我的手就在你手里　　　　不舍不弃　　　　　　　　来我的怀里　　　　或者　　　　让我住进你的心间　　　　默然相爱　　　　寂静欢喜 </p> </li> </ul> </div> <script type="text/javascript"></script> </body> </html>

调用方式：

<script type="text/javascript">
new slider({
    id:'slider', //必选：滚动ul的id
    auto:4 //可选，滚动间隙，默认3秒
})
</script>

作者: 岑安发表于 2010-11-14 16:33 原文链接

评论: 20　查看评论　发表评论

最新新闻：
· 必应 Bing 推出 Windows Phone 7 应用可视化搜索(2010-11-15 01:14)
· 6.001 的变迁(2010-11-15 00:29)
· 百度日文版文库测试版上线(2010-11-15 00:19)
· 解剖CPU(2010-11-15 00:08)
· 怎样设计一个简洁的手机网站 - 第1部分(2010-11-14 23:44)

编辑推荐：风雨20年：我所积累的20条编程经验

网站导航：博客园首页我的园子新闻闪存小组博问知识库

Google Reader