HTML5 SVG超炫环状导航菜单动画特效

当前位置:主页 > Html5库 > SVG > HTML5 SVG超炫环状导航菜单动画特效
HTML5 SVG超炫环状导航菜单动画特效
分享:

    插件介绍

    wheelnav是一款效果非常炫酷的HTML5 SVG环状导航菜单动画特效js插件。该环状导航菜单插件基于Raphael.js,可以制作各种带动画特效的饼状菜单、环形菜单和径向菜单等等。

    浏览器兼容性

    浏览器兼容性
    时间:2015-04-24
    阅读:
简要教程

wheelnav是一款效果非常炫酷的HTML5 SVG环状导航菜单动画特效js插件。该环状导航菜单插件基于Raphaël.js,可以制作各种带动画特效的饼状菜单、环形菜单和径向菜单等等。

该环状导航菜单可以工作在所有的桌面和移动手机的现代浏览器上。它的应用场景有:

  • 选项卡导航菜单
  • 饼状菜单、环形菜单和径向菜单
  • 各类子菜单
  • 选项按钮
  • 可以当复选框使用
  • 还有更多...

安装

可以通过bowernpm来安装该插件。

$ bower install wheelnav
$ npm install wheelnav                
              

使用方法

通过js来调用插件

HTML结构:

<div id="divWheelnav"></div>               
              

js代码:

var myWheelnav = new wheelnav("divWheelnav");
myWheelnav.slicePathFunction = slicePath().WheelSlice;
myWheelnav.colors = colorpalette.parrot;
myWheelnav.createWheel([icon.smile, icon.star, icon.fork, icon.$]);                
              
通过HTML5 data属性来初始化插件

HTML结构:

<div id="divWheelnav" data-wheelnav data-wheelnav-slicepath="WheelSlice" data-wheelnav-colors="#D80351,#F5D908,#00A3EE,#929292">
    <div data-wheelnav-navitemicon="smile">smile</div>
    <div data-wheelnav-navitemicon="star">star</div>
    <div data-wheelnav-navitemicon="fork">fork</div>
    <div data-wheelnav-navitemicon="$">donate</div>
</div>                
              

js代码:

var myWheelnav = new wheelnav("divWheelnav")               
              

应用举例

基本应用

SVG环状导航菜单-1

Wheelnav可以通过HTML5 data属性来初始化,data-wheelnav属性是必须的,还有一些可用的data属性可参考下面的例子:

HTML结构:

<div id="divWheel" data-wheelnav 
data-wheelnav-wheelradius="100"
data-wheelnav-navangle="90"
data-wheelnav-slicepath="DonutSlice" 
data-wheelnav-colors="#E34C26,#F06529" 
data-wheelnav-rotateoff>
</div>                
              

js代码:

var wheel = new wheelnav("divWheel");
wheel.createWheel(["0", "1", "2", "3"]);              
              
导航子菜单

SVG环状导航菜单-2

你可以通过data-wheelnav-navitemtexdata-wheelnav-navitemicon属性来创建一个环状菜单,制作这种菜单这两个属性必须使用一个。图标的名称来自于raphael.icons.js

Wheelnav会处理div上的onmouseup事件,并使用超链接上的href属性作为导航地址。

HTML结构:

<div id="divWheel" data-wheelnav>
    <div data-wheelnav-navitemicon="smile"></div>
    <div data-wheelnav-navitemtext="1" onmouseup="alert('Place your logic here.');"></div>
    <div data-wheelnav-navitemtext="2"><a href="#navitem"></a></div>
    <div data-wheelnav-navitemtext="3"></div>
</div>                
              

js代码:

这个例子不需要调用createWheel函数。

var wheel = new wheelnav("divWheel");                
              
Spreader

SVG环状导航菜单-3

HTML结构:

<div id="divWheel" data-wheelnav
data-wheelnav-spreader
data-wheelnav-spreaderradius="50"
data-wheelnav-spreaderpath="AntiStarSpreader">
    <div data-wheelnav-navitemtext="0"></div>
    <div data-wheelnav-navitemtext="1"></div>
    <div data-wheelnav-navitemtext="2"></div>
    <div data-wheelnav-navitemtext="3"></div>
</div>                
              

js代码:

var wheel = new wheelnav("divWheel");                
              
Marker

SVG环状导航菜单-4

HTML结构:

<div id="divWheel" data-wheelnav 
data-wheelnav-marker 
data-wheelnav-markerpath="DropMarker">
    <div data-wheelnav-navitemtext="0"></div>
    <div data-wheelnav-navitemtext="1"></div>
    <div data-wheelnav-navitemtext="2"></div>
    <div data-wheelnav-navitemtext="3"></div>
</div>              
              

js代码:

var wheel = new wheelnav("divWheel");               
              
更多

SVG环状导航菜单-5

你可以在解析环状菜单时通过data-wheelnav-init属性设置更多的参数。

HTML结构:

<div id="divWheel" data-wheelnav data-wheelnav-colors="#E34C26,#F06529" data-wheelnav-slicepath="DonutSlice" data-wheelnav-navangle="30"
data-wheelnav-init>
    <div data-wheelnav-navitemtext=""></div>
    <div data-wheelnav-navitemtext=""></div>
    <div data-wheelnav-navitemtext=""></div>
    <div data-wheelnav-navitemtext=""></div>
    <div data-wheelnav-navitemtext=""></div>
    <div data-wheelnav-navitemtext=""></div>
</div>          
              

js代码:

var wheel = new wheelnav("divWheel");
wheel.navItems[1].slicePathFunction = slicePath().PieSlice;
wheel.navItems[3].slicePathFunction = slicePath().PieSlice;
wheel.navItems[5].slicePathFunction = slicePath().PieSlice;
wheel.createWheel();            
              

该环状菜单插件还有很多的设置,例如颜色配置方案,CSS设置,动画设置等等。

关于wheelnav更详细的介绍前参考官方网站:http://wheelnavjs.softwaretailoring.net/