今天为大家带来的是一款“华而不实”的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
分享到:
相关推荐
实现饼状的菜单。菜单上的按钮呈现饼状排列,用户用手指滑动选择。这种菜单常见于播放器应用。
unity pie menu
Tasty Pie Menu v1.3
名称:Circle Mouse Gestures (pie menu) ---------------------------------------- 版本:1.4.0 作者:emvaized 分类:生产工具 ---------------------------------------- 概述:带有鼠标右键操作的圆形菜单。 这...
请参阅安装推荐:React和React-DOM 17.x npm install --save styled-components react-pie-menu# oryarn add styled-components react-pie-menu例子有几个。 还请检查其。 这是一个入门的方法: import React from ...
float piefloat pie float pie float pie float pie
实现饼状的菜单。菜单上的按钮呈现饼状排列,用户用手指滑动选择。这种菜单常见于播放器应用。 注意:请在Mac下解压使用
ios支持自定义圆形菜单(Menu)控件源码,源码CDPieMenu,该源码可以实习了支持一款比较简单可自定义的圆形菜单控件,该源码控件也就是CDPieMenu,简单可自定义的圆形菜单控件,特效ios源码频道免费提供下载。...
PIE 算法按照自己的理解写的 但是还有些问题,希望有相同感兴趣的给点建议
在Windows平台下开发一款基于pie menu的应用程序菜单,为用户设计饼状菜单皮肤并提供个性化界面设置,用户可以根据自己的喜好更改界面图标。自定义式应用程序菜单可满足用户自定义的添加应用程序的快捷方式并可隐藏...
CMU Multi-PIE人脸数据库包含超过750,000张337人的图像,这些图像在五个月内最多可记录四次。受试者在15个视点和19个照明条件下成像,同时显示一系列面部表情。此外,还获得了高分辨率正面图像。总的来说,...
pie.js以及pie.htc支持在ie8浏览器支持css3的border-redius属性
pie数据集matlab版本,fea特征,gnd标签。
pie_3.0总线规范,关于pie和pie总线的介绍可供大家学习
MultiPie人脸数据集共包含1515张人脸数据,已经进行对齐处理,可以直接读取使用
PIE-UAV用户使用手册V2.6(20151202),仅供学习和研究,请勿商用
一个基于PIE平台自己编写的RVI指数代码,作为一个事例,通过给大家分享讨论中国自己的PIE大数据平台的应用
PIE FACE 数据库用于计算机视觉中的人脸识别,多姿态,多角度,有不同光照
PIE工程师考试试题(答案).pdf
PIE-SAR用户手册