`
zhc0822
  • 浏览: 230570 次
  • 性别: Icon_minigender_1
  • 来自: 宝仔的奇幻城堡
社区版块
存档分类
最新评论

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

  • 大小: 149.3 KB
  • 大小: 53.9 KB
分享到:
评论
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的动画和特效再实现一遍.应该效果会更炫,代码也会更简单.

相关推荐

    Pie Menu 饼状菜单

    饼状菜单(Pie Menu)是一种独特且直观的用户界面元素,尤其在移动设备上,如播放器应用中广泛使用。这种菜单设计将一系列操作选项以圆形布局展示,如同蛋糕切片,用户通过手指的轻触或滑动来激活不同的功能。这种...

    unity pie menu

    unity pie menu

    Tasty Pie Menu v1.3

    Tasty Pie Menu v1.3

    Circle Mouse Gestures (pie menu)-1.4.0.zip

    名称:Circle Mouse Gestures (pie menu) ---------------------------------------- 版本:1.4.0 作者:emvaized 分类:生产工具 ---------------------------------------- 概述:带有鼠标右键操作的圆形菜单。 这...

    (0155)-iOS/iPhone/iPAD/iPod源代码-按钮(Button)-Pie Menu

    本文将深入探讨如何实现一个独特的饼状菜单(Pie Menu),它以按钮的形式呈现在屏幕上,用户通过手指滑动进行选择,这种设计常见于音乐播放器等应用程序中。 首先,饼状菜单的核心在于其布局方式。不同于传统的线性...

    react-pie-menu:可配置的径向菜单,用于React

    请参阅安装推荐: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

    此时,"pie.js" 和 "pie.htc" 这两个工具就显得尤为重要,它们为解决IE8对CSS3边框圆角(border-radius)支持不足的问题提供了方案。 "pie.js" 是一个JavaScript库,它的主要任务是检测浏览器是否支持CSS3的border-...

    float pie float pie float pie float pie

    float piefloat pie float pie float pie float pie

    pie_PIE_PIE算法_

    **PIE算法详解** PIE(Parallel Indexing and Enumeration)算法是一种用于数据处理和搜索的高效算法,尤其在大规模数据集上表现突出。这个算法的主要目标是并行化索引构建和枚举过程,以提高整体性能。在本文中,...

    ios支持自定义圆形菜单(Menu)控件

    ios支持自定义圆形菜单(Menu)控件源码,源码CDPieMenu,该源码可以实习了支持一款比较简单可自定义的圆形菜单控件,该源码控件也就是CDPieMenu,简单可自定义的圆形菜单控件,特效ios源码频道免费提供下载。...

    CMU_PIE人脸库

    CMU_PIE人脸库是一个广泛用于人脸识别和面部表情研究的数据集,由卡内基梅隆大学(Carnegie Mellon University)开发。这个数据集包含了大量受试者在不同光照、表情和视角下的面部图像,为学术界和工业界的计算机...

    PIE-1.0兼容包.zip

    标题中的"PIE-1.0兼容包.zip"是一个针对IE低版本的兼容性解决方案,主要是为了解决在Internet Explorer浏览器的低版本中,CSS3的一些特性如`border-radius`(圆角)无法正常显示的问题。这个兼容包包含了几个关键文件...

    基于交互行为预测的饼形快捷菜单的设计与实现

    在Windows平台下开发一款基于pie menu的应用程序菜单,为用户设计饼状菜单皮肤并提供个性化界面设置,用户可以根据自己的喜好更改界面图标。自定义式应用程序菜单可满足用户自定义的添加应用程序的快捷方式并可隐藏...

    IE圆角 IE阴影,pie.js,pie.htc

    "pie.js"和"pie.htc"就是这样的解决方案。 "Pie.js"是一个JavaScript库,它利用条件注释和HTC(HTML组件)技术,使IE6到IE9能够理解并渲染CSS3的圆角、阴影和其他一些图形效果。它的工作原理是通过JavaScript检测...

    PIE-Face-Database-of-CMU.zip_CMU PIE数据库_CMU pie 人脸库_CMU_PIE人脸库_P

    PIE FACE 数据库用于计算机视觉中的人脸识别,多姿态,多角度,有不同光照

    PIE-Engine快速入门.pdf

    PIE-Engine是航天宏图信息技术股份有限公司开发的一套遥感计算云服务平台,作为PIE-Engine产品家族的核心部分,PIE-EngineStudio提供了一个地理空间数据分析和计算平台,它基于云计算技术,支持海量卫星遥感影像和...

    基于Surface2自行开发的PieMenu

    PieMenu是一种用户界面元素,它模仿了饼图的形状,通常用于提供一种直观且高效的导航方式,用户可以通过触摸或手势与菜单交互。这种设计旨在优化触控体验,尤其在触摸屏设备上,如Surface系列平板电脑。 【描述】...

    MultiPie人脸数据集

    《MultiPie人脸数据集在人脸识别技术中的应用与详解》 人脸识别技术是计算机视觉领域的一个重要研究方向,近年来在安全、身份验证、监控等场景中得到了广泛应用。其中,MultiPie人脸数据集作为一项重要的资源,为...

    人脸表情识别数据集-CMU_PIE_Face-PIE和POSE子集

    CMU Multi-PIE人脸数据库包含超过750,000张337人的图像,这些图像在五个月内最多可​​记录四次。受试者在15个视点和19个照明条件下成像,同时显示一系列面部表情。此外,还获得了高分辨率正面图像。总的来说,...

    PIE-SAR用户手册

    PIE-SAR用户手册 PIE-SAR用户手册是航天宏图信息技术股份有限公司开发的一款雷达影像数据处理软件的用户手册。本手册为用户提供了详细的软件使用指南,包括软件简介、技术支持、界面说明、系统安装、使用教程等多...

Global site tag (gtag.js) - Google Analytics