首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
宝塔
V2EX  ›  JavaScript

Path2.0 Menu的javacript版

  •  
  •   benzhe · 2011-12-04 08:28:08 +08:00 · 7362 次点击
    这是一个创建于 2910 天前的主题,其中的信息可能已经有所发展或是发生改变。
    https://github.com/ben304/Path2.0-Menu/

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

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


    部分图片素材来自这里:
    https://github.com/levey/QuadCurveMenu
    25 回复  |  直到 1970-01-01 08:00:00 +08:00
        1
    eye008   2011-12-04 11:18:38 +08:00
        2
    yuest   2011-12-04 12:51:04 +08:00
    搞到 gh-pages 分支下嘛
        3
    chenluois   2011-12-04 13:27:08 +08:00   ♥ 1
    效果很好,楼主谦虚了。
        4
    benzhe   2011-12-04 16:52:36 +08:00 via Android
    @eye008 demo手机上看有错乱
        5
    benzhe   2011-12-04 18:58:12 +08:00
    Chrome 可以直接安装下面这个扩展看demo

    http://userscripts.org/scripts/source/119682.user.js
        6
    benzhe   2011-12-04 19:33:02 +08:00
    上面的油猴脚本已支持firefox
        7
    liuzhoou   2011-12-04 20:21:44 +08:00
    @benzhe 相当赞...
        8
    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上其实不是这样动的欢迎大家提出....
        9
    sparanoid   V2EX Moderator   2011-12-04 21:43:36 +08:00
    Path 2.0 Menu 的 CSS 版:

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

    :D
        10
    yuest   2011-12-04 21:46:48 +08:00
    @sparanoid 牛逼!
        11
    gDD   2011-12-04 22:12:07 +08:00
    @benzhe iOS上的收拢的时候外围图标还会转几圈,一楼的那个和@sparanoid贴出来的那个已经模仿得非常逼真了,但是都缺少点击大“+”号时候的按压反馈图标,还有外圈图标点击时候的放大淡出效果。
        12
    NemoAlex   2011-12-04 22:16:38 +08:00
    实现还是 CSS 的方式比较 Geek
    另外虽然知道很难听,可还是想说山寨一个不困难,这些东西的真正价值是设计之类的话...
        13
    romoo   2011-12-04 22:54:26 +08:00 via iPad
    就差 Flash 版了哦,哈哈。
        14
    benzhe   2011-12-05 00:39:37 +08:00
    @NemoAlex 纯粹是当做练习js,您想多了
        15
    whong736   2011-12-05 01:49:02 +08:00
    看不到效果
        16
    49degree   2011-12-05 09:36:56 +08:00
    Android上的Path和IOS上的Path也如@gDD 所说,图标收拢的时候还少了个转圈的细节
    感觉Android上的应用硬是要差些火候。。。
        17
    levey   2011-12-05 09:51:23 +08:00
    good job:)
        18
    est   2011-12-05 10:00:13 +08:00
    火星的问一下:这个效果有什么惊人的。。。。
        19
    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效果写的很好,把一些大工作量的东西都做完了...
        20
    vven   2011-12-05 10:29:23 +08:00
    同@est 问,效果是很漂亮,但是惊人怎么说?
        21
    romoo   2011-12-05 10:52:22 +08:00
    @vven 楼歪了,上面除了 @est 提到「惊人」,其他没人说「惊人」哦。
        22
    vven   2011-12-05 10:55:10 +08:00
    @romoo 只是看到最近大家都在讨论path2.0,所以好奇而已
        23
    est   2011-12-05 13:36:01 +08:00
    @romoo 主要是最近铺天盖地对Path 2.0这个效果的称赞和模仿。。。有点不明白这个效果是不是有点太好了?
        24
    benzhe   2011-12-05 13:41:38 +08:00
    @est 效仿很多,没怎么看到称赞。我也是看效仿多才顺手做个js练手,第一次做这种东西。评论多的是关于整个产品吧。
        25
    calvinke   2011-12-08 18:18:17 +08:00
    @benzhe 在某处看到你准备辞职 现在怎样?找到下家了吗? 对你的个人作战能力很感兴趣
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1063 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 25ms · UTC 23:31 · PVG 07:31 · LAX 15:31 · JFK 18:31
    ♥ Do have faith in what you're doing.