“华而不实”的转盘菜单(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语言子集的编译器
-
本文附件下载:
- fr.piemenu.zip (130.9 KB)
已有 0 人发表留言，猛击->>这里<<-参与讨论
JavaEye推荐
