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

Path2.0 Menu的javacript版

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

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

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


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

    http://userscripts.org/scripts/source/119682.user.js
    benzhe
        6
    benzhe  
    OP
       2011-12-04 19:33:02 +08:00
    上面的油猴脚本已支持firefox
    liuzhoou
        7
    liuzhoou  
       2011-12-04 20:21:44 +08:00
    @benzhe 相当赞...
    benzhe
        8
    benzhe  
    OP
       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
        9
    sparanoid  
    MOD
       2011-12-04 21:43:36 +08:00
    Path 2.0 Menu 的 CSS 版:

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

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