“华而不实”的转盘菜单(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推荐

• —软件人才免语言低担保 赴美带薪读研！—