笔记本电脑或是台式机

互联网

下载blooming-menu.js，解压文件夹目录如下图所示。

新建项目文件夹，将blooming-menu.min.js文件拷贝进项目文件夹。首先引入blooming-menu.min.js文件。

接着创建一个BloomingMenu对象。var menu = new BloomingMenu({  itemsNum: 8})                然后使用下面的方法来渲染环形菜单。menu.render()

这个js环形菜单的构造函数为：new BloomingMenu(opts)，可以在初始化的时候向构造函数中传入参数。var menu = new BloomingMenu({  startAngle: 60,  endAngle: 0})

可用的配置参数如下：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，默认值+。主菜单按钮的内容。opts.injectBaseCSS：类型：Boolean，默认值true。

下面的方法是对象实例的方法。obj.render：在DOM中添加一个菜单实例并绑定所有的事件监听。obj.remove：移除所有的DOM元素和事件监听。obj.open：以编程的方式打开环形菜单。obj.close：以编程的方式关闭环形菜单。obj.selectItem(num)：以编程的方式选择num对于的菜单项。

 

该环形菜单特效插件运行效果如下图所示：