锁定老帖子 主题:“华而不实”的转盘菜单(pie menu)
精华帖 (2) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-11-24
最后修改:2010-12-01
今天为大家带来的是一款“华而不实”的JavaScript特效。 这个控件是我2个月前为一个小项目写的。实现了一个比较有立体感的圆盘菜单效果(抄袭的ipod里打砖块游戏的菜单效果)。 老规矩,先上图。
当用户点击某一项时,圆盘会滚动,将点击项显示在最前端。当用户点击最前端项时,菜单项会向四周退去并渐隐,最后调用用户事先设定的回调函数。
浏览器测试情况如下:
使用圆盘菜单的方法也很简单: 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(); } });
参数都有注释,有几个详细解释一下:
好了,现在你就拥有一个好看的圆盘菜单了。赶紧来尝试一下吧。 如果你敢兴趣的话,还可以看看我之前发布的一篇blog:使用JavaScript构造C语言子集的编译器
-------------------------------11月30日更新----------------------------- 1、修改了同一位置连续点击出错的bug(感谢zjugzg的反馈); 2、修改了双击当前按钮不停弹出对话框的错误(感谢dengzhangtao的反馈)。
请下载附件中的fr.piemenu.latest.zip。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-11-26
不错!
我在IEtest中,用IE6模式打开,效果事件都OK. 当然了,png图片透明的问题还是存在的. 另外,可以考虑虑用jquery的动画和特效再实现一遍.应该效果会更炫,代码也会更简单. |
|
返回顶楼 | |
发表时间:2010-11-26
呵呵!兄弟的和你的有点儿不同!!!http://sxpyrgz.iteye.com/admin/blogs/798908
|
|
返回顶楼 | |
发表时间:2010-11-26
chrome下 在同一个位置连续点击会出现bug,显示的图片会减少,有时候减少到4个,2个,或者一个都没有了。可能是点击速度快于动画速度引起的。
|
|
返回顶楼 | |
发表时间:2010-11-26
JE帐号 写道 不错!
我在IEtest中,用IE6模式打开,效果事件都OK. 当然了,png图片透明的问题还是存在的. 另外,可以考虑虑用jquery的动画和特效再实现一遍.应该效果会更炫,代码也会更简单. 感谢支持。Jquery不熟,嘿嘿 |
|
返回顶楼 | |
发表时间:2010-11-26
zjugzg 写道 chrome下 在同一个位置连续点击会出现bug,显示的图片会减少,有时候减少到4个,2个,或者一个都没有了。可能是点击速度快于动画速度引起的。
是的,这个bug的确存在。写这段代码时我正在北京办事,心不太定。暂时的解决方法有两种:1、加快滑动的速度,比如设为100ms;2、适当拉开重叠图标的距离,把b值设大一点。 |
|
返回顶楼 | |
发表时间:2010-11-27
楼主哪些算法 怎么搞到的 哪里有相关介绍呢 谢谢啊
|
|
返回顶楼 | |
发表时间:2010-11-27
这感觉像是回到了非智能手机的程序里...
|
|
返回顶楼 | |
发表时间:2010-11-27
binlaniua 写道 楼主哪些算法 怎么搞到的 哪里有相关介绍呢 谢谢啊
所有图标均匀分布在一个椭圆上,按着椭圆的轨迹滚动,通过控制图标大小模拟透视的效果,没有太复杂的算法。 |
|
返回顶楼 | |
发表时间:2010-11-27
furlxy 写道 这感觉像是回到了非智能手机的程序里...
呵呵,主贴的第一个截图其实就是我开发的一款android小软件的菜单。事实上这种转盘状的菜单在iphone和android的一些应用中已经出现了。比较出名的有iphone下的ConvertBot和android下的SportyPal。 |
|
返回顶楼 | |