V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
shuding
V2EX  ›  分享创造

JS 模拟的 OS X Dock 效果

  •  1
     
  •   shuding ·
    shuding · 2014-10-22 16:01:10 +08:00 · 4837 次点击
    这是一个创建于 3710 天前的主题,其中的信息可能已经有所发展或是发生改变。
    以及一个 Menu bar 和 Finder(Finder 的 CSS 是别人的作品,其余自造)~

    半年前写的,欢迎围观 / 拍砖~

    http://shud.in/cssosx/
    第 1 条附言  ·  2014-10-22 18:27:53 +08:00
    对了另外,这货 http://shud.in/coverflow/ 也是一个仿 OS X 的效果 > <
    33 条回复    2014-10-23 17:16:08 +08:00
    xudshen
        1
    xudshen  
       2014-10-22 16:09:33 +08:00
    也蛮拼的
    cougar
        2
    cougar  
       2014-10-22 16:10:56 +08:00
    还以为那个文件夹可以点的,。。。。
    ariestiger
        3
    ariestiger  
       2014-10-22 16:28:31 +08:00
    哈哈,Finder左上角的前进后退没有对齐
    kokdemo
        4
    kokdemo  
       2014-10-22 16:38:56 +08:00
    我这里在左下角有个bug
    yangg
        5
    yangg  
       2014-10-22 16:39:15 +08:00
    Dock里鼠标移到Finder图标上时,可以明显的看到App Store等图标的锯齿(应该是,反正不是好效果),是加了什么效果呢?
    shuding
        6
    shuding  
    OP
       2014-10-22 16:45:28 +08:00
    @yangg 我感觉是 Chrome 渲染的原因,当图标缩小后也有些锯齿,但是等待一秒左右就正常了……
    likid
        7
    likid  
       2014-10-22 16:45:40 +08:00
    Finder icon 没有高亮的点。Dock 上没有 icon 镜像
    shuding
        8
    shuding  
    OP
       2014-10-22 16:45:47 +08:00
    @kokdemo 咦,是在 Chrome 下么 0 0
    lausius
        9
    lausius  
       2014-10-22 16:46:27 +08:00   ❤️ 1
    貌似firefox下没有显示居中,但是在chrome下图标有明显锯齿,firefox下没有。
    shuding
        10
    shuding  
    OP
       2014-10-22 16:47:38 +08:00
    @ariestiger
    @cougar

    Finder 来自这儿: http://codepen.io/paddykontschak/pen/JALeB

    我就加了个 drag 效果,有空改改吧 > <
    jings
        11
    jings  
       2014-10-22 17:00:04 +08:00
    mark 仅仅是喜欢
    @shuding 可以自定义不错不错。。。
    shuding
        12
    shuding  
    OP
       2014-10-22 17:00:39 +08:00
    @lausius 谢谢,FF 的问题刚刚弄好了 > <
    shuding
        13
    shuding  
    OP
       2014-10-22 17:01:32 +08:00
    @jings thx!
    Actrace
        14
    Actrace  
       2014-10-22 17:24:22 +08:00
    现在已经10.10了...跟上潮流啊...
    lovexisen
        15
    lovexisen  
       2014-10-22 17:25:19 +08:00
    谢谢;
    可以感受下苹果机
    lausius
        16
    lausius  
       2014-10-22 17:39:29 +08:00
    @shuding ……还有一个,firefox下音量控制显示不是竖向而是横向的。
    panxianhai
        17
    panxianhai  
       2014-10-22 18:22:16 +08:00
    赞,还有很多可以改进的地方,比如通知中心。
    popbones
        18
    popbones  
       2014-10-22 18:26:47 +08:00
    做这个类直接用Objective J比较好吧
    chairuosen
        19
    chairuosen  
       2014-10-22 18:29:49 +08:00
    #settings:before{content:"⚙"}
    服了。。。我以为css画的呢,那么精细
    shuding
        20
    shuding  
    OP
       2014-10-22 18:30:53 +08:00
    @popbones 第一次听说 Objective-J……受教了!我去看看。
    shuding
        21
    shuding  
    OP
       2014-10-22 18:31:55 +08:00
    @lausius
    @panxianhai
    谢谢建议 ;)
    kokdemo
        22
    kokdemo  
       2014-10-22 18:40:28 +08:00
    @shuding 效果好了
    popbones
        23
    popbones  
       2014-10-22 18:43:58 +08:00 via iPhone
    @shuding 用的人不多,有些人会觉得挺别扭的,不过plex的web app好像用了这个
    zythum
        24
    zythum  
       2014-10-22 18:48:56 +08:00
    good job. 做佷用心。阴影。圆角。透明度都很好
    danniel
        25
    danniel  
       2014-10-22 19:07:07 +08:00
    cool!
    loading
        26
    loading  
       2014-10-22 19:09:58 +08:00
    建议:所有图标用css的那种,追求没一张图!
    mortal
        27
    mortal  
       2014-10-22 20:03:33 +08:00
    哈哈哈,又想起了好多年前的「云系统」,仿 XP……
    meta
        28
    meta  
       2014-10-22 20:06:19 +08:00
    难得居然连ie都支持
    Actrace
        29
    Actrace  
       2014-10-22 20:11:00 +08:00
    @mortal 千脑?
    mortal
        30
    mortal  
       2014-10-22 20:15:14 +08:00
    @Actrace 好像还真是这个噢
    Actrace
        31
    Actrace  
       2014-10-22 20:20:48 +08:00
    @mortal 千脑好好做的话还是很不错的,只是他们家的市场部门似乎只把他当作一个网盘来运营,而且盈利手段土的无法直视。。。
    shuding
        32
    shuding  
    OP
       2014-10-22 20:27:55 +08:00
    @meta @.@ 我没在 IE 上面试过……我不知道什么效果
    goldenlove
        33
    goldenlove  
       2014-10-23 17:16:08 +08:00
    @zythum 朱一也来个 10.10 的版本?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1099 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:42 · PVG 02:42 · LAX 10:42 · JFK 13:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.