适合移动手机使用的js环形菜单特效插件

blooming-menu是一款适合在移动手机上使用的js环形菜单插件。该环形菜单提供了众多的參数,通过结合CSS3动画制作出效果很炫酷的圆形菜单展开和隐藏动画效果。

以下是这个圆形菜单菜价的可用參数:

  • opts.itemsNum:类型:Number,该參数为必填參数。

    该參数是菜单项的数量。
  • opts.startAngle:类型:Number。默认值90。菜单的開始角度。
  • opts.endAngle:类型:Number。默认值0。菜单的结束角度。
  • opts.radius:类型:Number。默认值80。圆形菜单的半径。
  • opts.itemAnimationDelay:类型:Number。默认值0.04。

    圆形菜单项动画的延迟时间。
  • opts.animationDuration:类型:Number。默认值0.4。

    动画的持续时间。
  • opts.fatherElement:类型:HTMLElement,默认值document.body圆形菜单的父元素。
  • opts.itemWidth:类型:Number,默认值50。

    菜单项的宽度。
  • opts.CSSClassPrefix:类型:String,默认值‘blooming-menu__‘。

    菜单项的CSS class名称前缀。
  • opts.mainContent:类型:String。默认值+。

    主菜单button的内容。
  • opts.injectBaseCSS:类型:Boolean,默认值true。

效果演示:http://www.htmleaf.com/Demo/201506081992.html

下载地址:http://www.htmleaf.com/jQuery/Menu-Navigation/201506081991.html

时间: 2024-10-06 00:12:11

适合移动手机使用的js环形菜单特效插件的相关文章

jQuery移动优先的炫酷环形菜单插件

FerroMenu是一款炫酷的移动优先的jquery环形菜单特效插件.该环形菜单插件可以让你很轻松的创建一个环形菜单,并且该菜单可以在屏幕上随意拖动到9个位置上(东.南.西.北.中方向和东南.西北.东北和西南方向). 该环形菜单的菜单项可以是锚链接.外部链接或javascript等等.该菜单展开的最终效果有点类似于超酷jQuery环形按钮菜单效果插件.FerroMenu环形气泡菜单的特点有: 可以将菜单拖动到屏幕的9个位置上:东.南.西.北.中方向和东南.西北.东北和西南方向. 可以通过拖动来移

jQuery和CSS3炫酷全屏滑动菜单特效

这是一款效果非常炫酷的jQuery和CSS3全屏推拉式滑动菜单特效插件.这个插件的效果是当点击了主菜单按钮时,全屏菜单从屏幕左侧滑出,主菜单按钮动态旋转更换图标. 下图演示了这个效果的过程: 在线演示:http://www.htmleaf.com/Demo/201502131375.html 下载地址:http://www.htmleaf.com/jQuery/Menu-Navigation/201502131374.html

适合安卓手机网页客户端导航代码

安卓手机底部四五分页的导航都是比较漂亮的 今天直接给大家推荐这款代码,这样就省得每次自己写了 jQuery特效代码: 01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 02<html xmlns="http://www.w3.org/1999/

适合移动手机使用的jQuery幻灯片插件

jflex是一款小巧的适合移动手机使用的jQuery幻灯片插件.该幻灯片插件支持移动触摸,支持鼠标拖拽切换,还支持带进度条的自动播放模式.它是否的小球,使用非常简单. 在线预览   源码下载 使用方法 使用该幻灯片插件需要引入jQuery,jflex.min.js和jflex.min.css文件. 1 2 3 <link rel="stylesheet" href="css/jflex.min.css" type="text/css">

jquery之点击弹出图标环形菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

外贸建站之自适应网站电脑手机网站不同JS效果区分写法代码分享

外贸建站之自适应网站电脑手机网站不同JS效果区分写法代码分享,今天给客户要求把网站Can Clip搞成自适应的,要求电脑跟手机上菜单展开采用不同的效果, 相信很多程序员都有遇到过这种情况,这里把我们的解决方案分享给大家. 1 if($(window).width()>768){ 2 3 //电脑PC端JS代码 4 5 } 对,没错,只需要给电脑端显示的代码用上这个,就可以了,大家可以根据自己的需要修改 不同的宽度,我们在Porsche Piwis III项目中,将PC跟手机端显示的区分宽度设置的

CSS3超酷移动手机滑动隐藏側边栏菜单特效

这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效. 这四种效果各自是:默认的点击滑动側边栏菜单效果.带3D transforms的滑动側边栏效果.文字缩放和淡入淡出效果的滑动側边栏以及使用translate来实现滑动側边栏的效果. 每个滑动側边栏效果都带有从右到左淡入淡出的滑动过渡效果. 菜单条中的菜单项以一个接一个的方式显示,这样的效果是通过为它们分别加入 transition-delay 来实现的.以下来看看默认的滑动側边栏效果的制作方法. 插件中使用了font-awesom

[android] 优酷环形菜单-相对布局练习

优酷环形菜单 布局文件,使用<RelativeLayout/>控件作为第一级菜单,相对布局,位于父控件的底部,水平居中,因为图片不是特别的标准,因此宽度和高度都钉死,宽度是高度的两倍 二次菜单和三级菜单都一样的布局 小房子的图标<imageView/>控件,在父控件中居中 第二级搜索图标,位于父控件的底部,上下左右maigin10dp 第二级菜单图标,位于父控件的顶部,水平居中,marginTop 10dp 第二级叹号图标,位于父控件的底部,右边,margin 10dp 第三级的图

JS树形菜单

超全的JS树形菜单源代码共享(有实例图) 树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的JS树形菜单共享出来,相信你一定用得上. 一共包括八种,下面就一一介绍: 1.不同表现方式的JS树形菜单(如图所示) 2.复选框式的JS树形菜单(如图所示)左图为只可以选择单节点,右图为在选择子节点的同时选择父节点 3.可以重新排列节点并且具有拖放功能的js树形菜单(如图所示) 4.带有提示框的js