Path2.0 Menu的javacript版

V2EX = way to explore

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

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

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

https://github.com/ben304/Path2.0-Menu/

十分糟糕的代码，高手勿喷

oo没用好，菜鸟一个，非常欢迎对细节的建议

部分图片素材来自这里：
https://github.com/levey/QuadCurveMenu

菜鸟

图片素材

25 条回复 • 1970-01-01 08:00:00 +08:00

eye008

2011-12-04 11:18:38 +08:00

https://github.com/beaucollins/radial-menu

这也有1个。

yuest

2011-12-04 12:51:04 +08:00

搞到 gh-pages 分支下嘛

chenluois

2011-12-04 13:27:08 +08:00

效果很好，楼主谦虚了。

benzhe

2011-12-04 16:52:36 +08:00 via Android

@eye008 demo手机上看有错乱

benzhe

2011-12-04 18:58:12 +08:00

Chrome 可以直接安装下面这个扩展看demo

http://userscripts.org/scripts/source/119682.user.js

benzhe

2011-12-04 19:33:02 +08:00

上面的油猴脚本已支持firefox

liuzhoou

2011-12-04 20:21:44 +08:00

@benzhe 相当赞...

benzhe

2011-12-04 21:39:13 +08:00

http://path2menu.sinaapp.com/

这里是网页预览，测试过IE9,chrome12+,Firefox7+没问题,不过因为用的jquery所以其它浏览器也应该没多大问题，除了IE6...

定制选项暂时在path/script.js，晚点再修改为插件的调用方式..
可定制的选项还是挺多的，凑合吧

后来从android的apk包里提取了几个小icon，填上去了。然后因为我只看过自己android上path的效果，所以如果ios上其实不是这样动的欢迎大家提出....

sparanoid

MOD

2011-12-04 21:43:36 +08:00

Path 2.0 Menu 的 CSS 版:

http://sparanoid.com/lab/path-menu/

:D

yuest

2011-12-04 21:46:48 +08:00

@sparanoid 牛逼！

gDD

2011-12-04 22:12:07 +08:00

@benzhe iOS上的收拢的时候外围图标还会转几圈，一楼的那个和@sparanoid贴出来的那个已经模仿得非常逼真了，但是都缺少点击大“+”号时候的按压反馈图标，还有外圈图标点击时候的放大淡出效果。

NemoAlex

2011-12-04 22:16:38 +08:00

实现还是 CSS 的方式比较 Geek
另外虽然知道很难听，可还是想说山寨一个不困难，这些东西的真正价值是设计之类的话...

romoo

2011-12-04 22:54:26 +08:00 via iPad

就差 Flash 版了哦，哈哈。

benzhe

2011-12-05 00:39:37 +08:00

@NemoAlex 纯粹是当做练习js，您想多了

whong736

2011-12-05 01:49:02 +08:00

看不到效果

49degree

2011-12-05 09:36:56 +08:00

Android上的Path和IOS上的Path也如@gDD 所说，图标收拢的时候还少了个转圈的细节
感觉Android上的应用硬是要差些火候。。。

levey

2011-12-05 09:51:23 +08:00

good job:)

est

2011-12-05 10:00:13 +08:00

火星的问一下：这个效果有什么惊人的。。。。

iwege

2011-12-05 10:22:25 +08:00

@49degree @gDD 压力实现起来很简单给touch事件或者是mouse事件做监听之后给flyout-btn加个webkitTransform:scale(0.5)之后再给up事件将这个值去掉就好了。

外圈图片点击放大淡出给一个animation scale从1到2，opacity从1到0，监听webkitAnimationEndh或者webkitTransitionEnd之后给一个visibility为hidden即可，没有这两个事件的，可以使用setTimeout来做这个效果。以前为了实现iphone的loading效果的时候做过，要做起来并不是很难，关键还@sparanoid 的CSS效果写的很好，把一些大工作量的东西都做完了...

vven

2011-12-05 10:29:23 +08:00

同@est 问，效果是很漂亮，但是惊人怎么说？

romoo

2011-12-05 10:52:22 +08:00

@vven 楼歪了，上面除了 @est 提到「惊人」，其他没人说「惊人」哦。

vven

2011-12-05 10:55:10 +08:00

@romoo 只是看到最近大家都在讨论path2.0，所以好奇而已

est

2011-12-05 13:36:01 +08:00

@romoo 主要是最近铺天盖地对Path 2.0这个效果的称赞和模仿。。。有点不明白这个效果是不是有点太好了？

benzhe

2011-12-05 13:41:38 +08:00

@est 效仿很多，没怎么看到称赞。我也是看效仿多才顺手做个js练手，第一次做这种东西。评论多的是关于整个产品吧。

calvinke

2011-12-08 18:18:17 +08:00