Path2.0 Menu的javacript版

[benzhe]

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

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

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


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

[eye008]

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

这也有1个。

[yuest]

搞到 gh-pages 分支下嘛

[chenluois]

效果很好，楼主谦虚了。

[benzhe]

@eye008 demo手机上看有错乱

[benzhe]

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

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

[benzhe]

上面的油猴脚本已支持firefox

[liuzhoou]

@benzhe 相当赞...

[benzhe]

http://path2menu.sinaapp.com/

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

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

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

[sparanoid]

Path 2.0 Menu 的 CSS 版:

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

:D

[yuest]

@sparanoid 牛逼！

[gDD]

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

[NemoAlex]

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

[romoo]

就差 Flash 版了哦，哈哈。

[benzhe]

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

[whong736]

看不到效果

[49degree]

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

[levey]

good job:)

[est]

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

[iwege]

@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]

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