当前位置:主页 > 网页特效 > 菜单导航 >

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

发布时间:2018/08/03 来源:互联网 浏览: 关键词:菜单导航 环形菜单 
适合移动手机使用的js环形菜单特效插件 适合移动手机使用的js环形菜单特效插件
阿里云

简要教程

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

js环形菜单-1js环形菜单-2

安装

你可以通过nmp来安装这个js环形菜单插件,并使用browserify在浏览器中运行它。

npm install --save blooming-menu      

使用方法

首先引入blooming-menu.min.js文件。

<scriptsrc='js/blooming-menu.min.js'></script>

接着创建一个BloomingMenu对象。

varmenu =newBloomingMenu({
  itemsNum: 8
})       

然后使用下面的方法来渲染环形菜单。

menu.render()     

接下来你就可以为环形菜单中的每一个菜单项添加事件。

menu.props.elements.items.forEach(function(item, index) {
  item.addEventListener('click',function() {
    console.log('Item #'+ index +'was clicked')
  })
})          

配置参数

这个js环形菜单的构造函数为:new BloomingMenu(opts),可以在初始化的时候向构造函数中传入参数。

varmenu =newBloomingMenu({
  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对于的菜单项。

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top