推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
benzhe

Path2.0 Menu的javacript版

  •  
  •   benzhe · Dec 4, 2011 · 10302 views
    This topic created in 5449 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
    eye008
    Dec 4, 2011
    1
    yuest
    yuest
    Dec 4, 2011
    2
    搞到 gh-pages 分支下嘛
    chenluois
    chenluois
    Dec 4, 2011❤️1
    3
    效果很好,楼主谦虚了。
    benzhe
    benzhe
    OP
    Dec 4, 2011 via Android
    4
    @eye008 demo手机上看有错乱
    benzhe
    benzhe
    OP
    Dec 4, 2011
    5
    Chrome 可以直接安装下面这个扩展看demo

    http://userscripts.org/scripts/source/119682.user.js
    benzhe
    benzhe
    OP
    Dec 4, 2011
    6
    上面的油猴脚本已支持firefox
    liuzhoou
    liuzhoou
    Dec 4, 2011
    7
    @benzhe 相当赞...
    benzhe
    benzhe
    OP
    Dec 4, 2011
    8
    http://path2menu.sinaapp.com/

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

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

    后来从android的apk包里提取了几个小icon,填上去了。然后因为我只看过自己android上path的效果,所以如果ios上其实不是这样动的欢迎大家提出....
    sparanoid
    sparanoid
    Dec 4, 2011
    9
    Path 2.0 Menu 的 CSS 版:

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

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