JS 模拟的 OS X Dock 效果

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3720 天前的主题，其中的信息可能已经有所发展或是发生改变。

以及一个 Menu bar 和 Finder（Finder 的 CSS 是别人的作品，其余自造）~

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

http://shud.in/cssosx/

第 1 条附言 · 2014-10-22 18:27:53 +08:00

对了另外，这货 http://shud.in/coverflow/ 也是一个仿 OS X 的效果 > <

Finder

Dock

CSS

33 条回复 • 2014-10-23 17:16:08 +08:00

xudshen

2014-10-22 16:09:33 +08:00

也蛮拼的

cougar

2014-10-22 16:10:56 +08:00

还以为那个文件夹可以点的，。。。。

ariestiger

2014-10-22 16:28:31 +08:00

哈哈，Finder左上角的前进后退没有对齐

kokdemo

2014-10-22 16:38:56 +08:00

我这里在左下角有个bug

yangg

2014-10-22 16:39:15 +08:00

Dock里鼠标移到Finder图标上时，可以明显的看到App Store等图标的锯齿（应该是，反正不是好效果），是加了什么效果呢？

shuding

2014-10-22 16:45:28 +08:00

@yangg 我感觉是 Chrome 渲染的原因，当图标缩小后也有些锯齿，但是等待一秒左右就正常了……

likid

2014-10-22 16:45:40 +08:00

Finder icon 没有高亮的点。Dock 上没有 icon 镜像

shuding

2014-10-22 16:45:47 +08:00

@kokdemo 咦，是在 Chrome 下么 0 0

lausius

2014-10-22 16:46:27 +08:00

貌似firefox下没有显示居中，但是在chrome下图标有明显锯齿，firefox下没有。

shuding

2014-10-22 16:47:38 +08:00

@ariestiger
@cougar

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

我就加了个 drag 效果，有空改改吧 > <

jings

2014-10-22 17:00:04 +08:00

mark 仅仅是喜欢
@shuding 可以自定义不错不错。。。

shuding

2014-10-22 17:00:39 +08:00

@lausius 谢谢，FF 的问题刚刚弄好了 > <

shuding

2014-10-22 17:01:32 +08:00

@jings thx!

Actrace

2014-10-22 17:24:22 +08:00

现在已经10.10了...跟上潮流啊...

lovexisen

2014-10-22 17:25:19 +08:00

谢谢；
可以感受下苹果机

lausius

2014-10-22 17:39:29 +08:00

@shuding ……还有一个，firefox下音量控制显示不是竖向而是横向的。

panxianhai

2014-10-22 18:22:16 +08:00

赞，还有很多可以改进的地方，比如通知中心。

popbones

2014-10-22 18:26:47 +08:00

做这个类直接用Objective J比较好吧

chairuosen

2014-10-22 18:29:49 +08:00

#settings:before{content:"⚙"}
服了。。。我以为css画的呢，那么精细

shuding

2014-10-22 18:30:53 +08:00

@popbones 第一次听说 Objective-J……受教了！我去看看。

shuding

2014-10-22 18:31:55 +08:00

@lausius
@panxianhai
谢谢建议 ;)

kokdemo

2014-10-22 18:40:28 +08:00

@shuding 效果好了

popbones

2014-10-22 18:43:58 +08:00 via iPhone

@shuding 用的人不多，有些人会觉得挺别扭的，不过plex的web app好像用了这个

zythum

2014-10-22 18:48:56 +08:00

good job. 做佷用心。阴影。圆角。透明度都很好

danniel

2014-10-22 19:07:07 +08:00

cool!

loading

2014-10-22 19:09:58 +08:00

建议：所有图标用css的那种，追求没一张图！

mortal

2014-10-22 20:03:33 +08:00

哈哈哈，又想起了好多年前的「云系统」，仿 XP……

meta

2014-10-22 20:06:19 +08:00

难得居然连ie都支持

Actrace

2014-10-22 20:11:00 +08:00

@mortal 千脑？

mortal

2014-10-22 20:15:14 +08:00

@Actrace 好像还真是这个噢

Actrace

2014-10-22 20:20:48 +08:00

@mortal 千脑好好做的话还是很不错的，只是他们家的市场部门似乎只把他当作一个网盘来运营，而且盈利手段土的无法直视。。。

shuding

2014-10-22 20:27:55 +08:00

@meta @.@ 我没在 IE 上面试过……我不知道什么效果

goldenlove

2014-10-23 17:16:08 +08:00

@zythum 朱一也来个 10.10 的版本？