论坛首页 Web前端技术论坛

“华而不实”的转盘菜单(pie menu)

浏览 16431 次
精华帖 (2) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-11-24   最后修改:2010-12-01

 

 

今天为大家带来的是一款“华而不实”的JavaScript特效。

这个控件是我2个月前为一个小项目写的。实现了一个比较有立体感的圆盘菜单效果(抄袭的ipod里打砖块游戏的菜单效果)。

老规矩,先上图。



 

当用户点击某一项时,圆盘会滚动,将点击项显示在最前端。当用户点击最前端项时,菜单项会向四周退去并渐隐,最后调用用户事先设定的回调函数。

 

浏览器测试情况如下:

 

  • Opera10 测试通过
  • FF3.5 测试通过
  • Chrome6 测试通过
  • IE7/8 测试通过
  • IE6 没有测试

使用圆盘菜单的方法也很简单:

1、引入js文件

 

<script src="./scripts/fr.menu.js" type="text/javascript"></script>
 


2、引入css文件

 

<link href="./styles/fr.menu.css" media="screen" rel="stylesheet" type="text/css" />
 

     css文件中包含了对控件外观的一般设定,包括位置、字体、颜色等等。


3、输入html代码

 

<div id="fr3DMenu"></div>

 

4、调用圆盘菜单

 

FR.Menu3D.create({
        // 要转换的div标签的id
        id: 'fr3DMenu',
        // 每次切换所需时间,单位为毫秒
        time: 200,
        // 设定长半轴数值
        a: 180,
        // 设定短半轴数值
        b: 60,
        // 设定图标
        items: [{ icon: './cart.png', title: '购物车' },
        { icon: './camera.png', title: '相册' },
        { icon: './email.png', title: '站内信' },
        { icon: './friend.png', title: '好友' },
        { icon: './note.png', title: '备忘' },
        { icon: './settings.png', title: '设置'}],
        // 是否显示控件按钮
        showButton: false,
        // 主题
        theme: 'oxygen',
        // 标题字号
        titleSize: 25,
        // 回调函数
        callback: function(which) {
            var num = which + 1;
            alert("选择了第" + num + "个");
            FR.Menu3D.recover();
        }
    });

 

参数都有注释,有几个详细解释一下:

 

  • showButton设为true的话,圆盘下方会显示前进后退和确定的按钮(如下图)。
  • theme主要是指按钮的样式。如果你需要自定义按钮的话,可以新建如AAA的文件夹,存入按钮图标,然后将theme设置为AAA即可。
  • callback会传入一个数字,代表当前选择的是第几个图标,从0开始排序,按照items的索引顺序。
  • 注意到callback中还有一个函数:FR.Menu3D.recover();调用这个方法可以让渐隐的圆盘再浮现出来。


好了,现在你就拥有一个好看的圆盘菜单了。赶紧来尝试一下吧。

如果你敢兴趣的话,还可以看看我之前发布的一篇blog:使用JavaScript构造C语言子集的编译器

 

-------------------------------11月30日更新-----------------------------

1、修改了同一位置连续点击出错的bug(感谢zjugzg的反馈);

2、修改了双击当前按钮不停弹出对话框的错误(感谢dengzhangtao的反馈)。

 

请下载附件中的fr.piemenu.latest.zip。

  • 大小: 149.3 KB
  • 大小: 53.9 KB
   发表时间:2010-11-26  
不错!
我在IEtest中,用IE6模式打开,效果事件都OK.
当然了,png图片透明的问题还是存在的.
另外,可以考虑虑用jquery的动画和特效再实现一遍.应该效果会更炫,代码也会更简单.
0 请登录后投票
   发表时间:2010-11-26  
呵呵!兄弟的和你的有点儿不同!!!http://sxpyrgz.iteye.com/admin/blogs/798908
0 请登录后投票
   发表时间:2010-11-26  
chrome下 在同一个位置连续点击会出现bug,显示的图片会减少,有时候减少到4个,2个,或者一个都没有了。可能是点击速度快于动画速度引起的。
0 请登录后投票
   发表时间:2010-11-26  
JE帐号 写道
不错!
我在IEtest中,用IE6模式打开,效果事件都OK.
当然了,png图片透明的问题还是存在的.
另外,可以考虑虑用jquery的动画和特效再实现一遍.应该效果会更炫,代码也会更简单.

感谢支持。Jquery不熟,嘿嘿
0 请登录后投票
   发表时间:2010-11-26  
zjugzg 写道
chrome下 在同一个位置连续点击会出现bug,显示的图片会减少,有时候减少到4个,2个,或者一个都没有了。可能是点击速度快于动画速度引起的。

是的,这个bug的确存在。写这段代码时我正在北京办事,心不太定。暂时的解决方法有两种:1、加快滑动的速度,比如设为100ms;2、适当拉开重叠图标的距离,把b值设大一点。
0 请登录后投票
   发表时间:2010-11-27  
楼主哪些算法 怎么搞到的 哪里有相关介绍呢 谢谢啊
0 请登录后投票
   发表时间:2010-11-27  
这感觉像是回到了非智能手机的程序里...
0 请登录后投票
   发表时间:2010-11-27  
binlaniua 写道
楼主哪些算法 怎么搞到的 哪里有相关介绍呢 谢谢啊

所有图标均匀分布在一个椭圆上,按着椭圆的轨迹滚动,通过控制图标大小模拟透视的效果,没有太复杂的算法。
0 请登录后投票
   发表时间:2010-11-27  
furlxy 写道
这感觉像是回到了非智能手机的程序里...

呵呵,主贴的第一个截图其实就是我开发的一款android小软件的菜单。事实上这种转盘状的菜单在iphone和android的一些应用中已经出现了。比较出名的有iphone下的ConvertBot和android下的SportyPal。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics