今天为大家带来的是一款“华而不实”的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
分享到:
相关推荐
饼状菜单(Pie Menu)是一种独特且直观的用户界面元素,尤其在移动设备上,如播放器应用中广泛使用。这种菜单设计将一系列操作选项以圆形布局展示,如同蛋糕切片,用户通过手指的轻触或滑动来激活不同的功能。这种...
unity pie menu
Tasty Pie Menu v1.3
名称:Circle Mouse Gestures (pie menu) ---------------------------------------- 版本:1.4.0 作者:emvaized 分类:生产工具 ---------------------------------------- 概述:带有鼠标右键操作的圆形菜单。 这...
本文将深入探讨如何实现一个独特的饼状菜单(Pie Menu),它以按钮的形式呈现在屏幕上,用户通过手指滑动进行选择,这种设计常见于音乐播放器等应用程序中。 首先,饼状菜单的核心在于其布局方式。不同于传统的线性...
请参阅安装推荐:React和React-DOM 17.x npm install --save styled-components react-pie-menu# oryarn add styled-components react-pie-menu例子有几个。 还请检查其。 这是一个入门的方法: import React from ...
此时,"pie.js" 和 "pie.htc" 这两个工具就显得尤为重要,它们为解决IE8对CSS3边框圆角(border-radius)支持不足的问题提供了方案。 "pie.js" 是一个JavaScript库,它的主要任务是检测浏览器是否支持CSS3的border-...
float piefloat pie float pie float pie float pie
**PIE算法详解** PIE(Parallel Indexing and Enumeration)算法是一种用于数据处理和搜索的高效算法,尤其在大规模数据集上表现突出。这个算法的主要目标是并行化索引构建和枚举过程,以提高整体性能。在本文中,...
ios支持自定义圆形菜单(Menu)控件源码,源码CDPieMenu,该源码可以实习了支持一款比较简单可自定义的圆形菜单控件,该源码控件也就是CDPieMenu,简单可自定义的圆形菜单控件,特效ios源码频道免费提供下载。...
CMU_PIE人脸库是一个广泛用于人脸识别和面部表情研究的数据集,由卡内基梅隆大学(Carnegie Mellon University)开发。这个数据集包含了大量受试者在不同光照、表情和视角下的面部图像,为学术界和工业界的计算机...
标题中的"PIE-1.0兼容包.zip"是一个针对IE低版本的兼容性解决方案,主要是为了解决在Internet Explorer浏览器的低版本中,CSS3的一些特性如`border-radius`(圆角)无法正常显示的问题。这个兼容包包含了几个关键文件...
在Windows平台下开发一款基于pie menu的应用程序菜单,为用户设计饼状菜单皮肤并提供个性化界面设置,用户可以根据自己的喜好更改界面图标。自定义式应用程序菜单可满足用户自定义的添加应用程序的快捷方式并可隐藏...
"pie.js"和"pie.htc"就是这样的解决方案。 "Pie.js"是一个JavaScript库,它利用条件注释和HTC(HTML组件)技术,使IE6到IE9能够理解并渲染CSS3的圆角、阴影和其他一些图形效果。它的工作原理是通过JavaScript检测...
PIE FACE 数据库用于计算机视觉中的人脸识别,多姿态,多角度,有不同光照
PIE-Engine是航天宏图信息技术股份有限公司开发的一套遥感计算云服务平台,作为PIE-Engine产品家族的核心部分,PIE-EngineStudio提供了一个地理空间数据分析和计算平台,它基于云计算技术,支持海量卫星遥感影像和...
PieMenu是一种用户界面元素,它模仿了饼图的形状,通常用于提供一种直观且高效的导航方式,用户可以通过触摸或手势与菜单交互。这种设计旨在优化触控体验,尤其在触摸屏设备上,如Surface系列平板电脑。 【描述】...
《MultiPie人脸数据集在人脸识别技术中的应用与详解》 人脸识别技术是计算机视觉领域的一个重要研究方向,近年来在安全、身份验证、监控等场景中得到了广泛应用。其中,MultiPie人脸数据集作为一项重要的资源,为...
CMU Multi-PIE人脸数据库包含超过750,000张337人的图像,这些图像在五个月内最多可记录四次。受试者在15个视点和19个照明条件下成像,同时显示一系列面部表情。此外,还获得了高分辨率正面图像。总的来说,...
PIE-SAR用户手册 PIE-SAR用户手册是航天宏图信息技术股份有限公司开发的一款雷达影像数据处理软件的用户手册。本手册为用户提供了详细的软件使用指南,包括软件简介、技术支持、界面说明、系统安装、使用教程等多...