Path2.0 Menu的javacript版

V2EX = way to explore

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

For Existing Member Sign In

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 5265 days ago, the information mentioned may be changed or developed.

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

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

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

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

菜鸟

图片素材

25 replies • 1970-01-01 08:00:00 +08:00

eye008

Dec 4, 2011

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

这也有1个。

yuest

Dec 4, 2011

搞到 gh-pages 分支下嘛

chenluois

Dec 4, 2011

效果很好，楼主谦虚了。

benzhe

Dec 4, 2011 via Android

@eye008 demo手机上看有错乱

benzhe

Dec 4, 2011

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

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

benzhe

Dec 4, 2011

上面的油猴脚本已支持firefox

liuzhoou

Dec 4, 2011

@benzhe 相当赞...

benzhe

Dec 4, 2011

http://path2menu.sinaapp.com/

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

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

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

sparanoid

Dec 4, 2011

Path 2.0 Menu 的 CSS 版:

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

:D

yuest

Dec 4, 2011

@sparanoid 牛逼！

gDD

Dec 4, 2011

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

NemoAlex

Dec 4, 2011

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

romoo

Dec 4, 2011 via iPad

就差 Flash 版了哦，哈哈。

benzhe

Dec 5, 2011

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

whong736

Dec 5, 2011

看不到效果

49degree

Dec 5, 2011

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

levey

Dec 5, 2011

good job:)

est

Dec 5, 2011

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

iwege

Dec 5, 2011

@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

Dec 5, 2011

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

romoo

Dec 5, 2011

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

vven

Dec 5, 2011

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

est

Dec 5, 2011

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

benzhe

Dec 5, 2011

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

calvinke

Dec 8, 2011