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

 

 

今天为大家带来的是一款“华而不实”的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。

评论

20 楼 hellohank 2010-12-01  

对于一些个人创造并分享的好东东，偶是坚决要顶滴！楼主再接再励，期待更多的精品啊，哈哈哈~

19 楼 java528 2010-11-30  

在IE8模式下
点击一个图标后弹出对话框，然后点击确认后，图片轮廓变虚线，
图片下方有黑底

18 楼 zhc0822 2010-11-30  

dengzhangtao 写道

楼主 ，  我发现bug了 ，  双击菜单就会出现一直弹出对话框。

你好，该bug已经修复，请下载主贴最新上传的附件。感谢你的反馈。

17 楼 zhc0822 2010-11-30  

zhc0822 写道

zjugzg 写道

chrome下 在同一个位置连续点击会出现bug，显示的图片会减少，有时候减少到4个，2个，或者一个都没有了。可能是点击速度快于动画速度引起的。

是的，这个bug的确存在。写这段代码时我正在北京办事，心不太定。暂时的解决方法有两种：1、加快滑动的速度，比如设为100ms；2、适当拉开重叠图标的距离，把b值设大一点。

你好，该bug已经修复，请下载主贴最新上传的附件。感谢你的反馈。

16 楼 dengzhangtao 2010-11-30  

楼主 ，  我发现bug了 ，  双击菜单就会出现一直弹出对话框。

15 楼 dahua110 2010-11-30  

不说点什么   对不起楼主的分享精神   感谢楼主

14 楼 xiangni2010 2010-11-29  

喜欢这种帖子
NB

13 楼 zhc0822 2010-11-29  

185582 写道

在IE6上看的效果不太好，图片有背景色，不是透明的。

你好，那是IE6对png图像支持不好的原因，你可以选择使用gif图像来避免这个问题。

12 楼 185582 2010-11-29  

在IE6上看的效果不太好，图片有背景色，不是透明的。

11 楼 763691 2010-11-29  

效果不错 收藏起来 

10 楼 jxqlovejava 2010-11-27  

哇，楼主牛~

9 楼 zhc0822 2010-11-27  

furlxy 写道

这感觉像是回到了非智能手机的程序里...

呵呵，主贴的第一个截图其实就是我开发的一款android小软件的菜单。事实上这种转盘状的菜单在iphone和android的一些应用中已经出现了。比较出名的有iphone下的ConvertBot和android下的SportyPal。

8 楼 zhc0822 2010-11-27  

binlaniua 写道

楼主哪些算法 怎么搞到的 哪里有相关介绍呢 谢谢啊

所有图标均匀分布在一个椭圆上，按着椭圆的轨迹滚动，通过控制图标大小模拟透视的效果，没有太复杂的算法。

7 楼 furlxy 2010-11-27  

这感觉像是回到了非智能手机的程序里...

6 楼 binlaniua 2010-11-27  

楼主哪些算法 怎么搞到的 哪里有相关介绍呢 谢谢啊

5 楼 zhc0822 2010-11-26  

zjugzg 写道

chrome下 在同一个位置连续点击会出现bug，显示的图片会减少，有时候减少到4个，2个，或者一个都没有了。可能是点击速度快于动画速度引起的。

是的，这个bug的确存在。写这段代码时我正在北京办事，心不太定。暂时的解决方法有两种：1、加快滑动的速度，比如设为100ms；2、适当拉开重叠图标的距离，把b值设大一点。

4 楼 zhc0822 2010-11-26  

JE帐号 写道

不错!
我在IEtest中,用IE6模式打开,效果事件都OK.
当然了,png图片透明的问题还是存在的.
另外,可以考虑虑用jquery的动画和特效再实现一遍.应该效果会更炫,代码也会更简单.

感谢支持。Jquery不熟，嘿嘿

3 楼 zjugzg 2010-11-26  

chrome下 在同一个位置连续点击会出现bug，显示的图片会减少，有时候减少到4个，2个，或者一个都没有了。可能是点击速度快于动画速度引起的。

2 楼 sxpyrgz 2010-11-26  

呵呵！兄弟的和你的有点儿不同！！！http://sxpyrgz.iteye.com/admin/blogs/798908

1 楼 JE帐号 2010-11-26  

不错!
我在IEtest中,用IE6模式打开,效果事件都OK.
当然了,png图片透明的问题还是存在的.
另外,可以考虑虑用jquery的动画和特效再实现一遍.应该效果会更炫,代码也会更简单.