html5动态圆,使用HTML5+CSS3实现的圆形菜单

本人学了4天HTML5+CSS3，实现的一个圆形菜单

只要传入一个2维数组即可动态创建这个菜单

参数可以设置菜单中之间的间隙，菜单动画延迟，菜单的分布方式

从GITHUB获取源代码

https://github.com/yourlin/nicemenu

1.[图片] QQ图片20140430080001.jpg

2.[图片] QQ图片20140430075943.jpg

3.[代码]菜单默认分布

function createMenu()

{

var targetDom = document.getElementById("targetMenu");

nm = new nice_menu(targetDom);

nm.distributionType = 1;

nm.delay = 50;

nm.gap = 10;

nm.nm_ItemsData = [

["Menu1", "#", "_self", "./img/1.ico"],

["Menu2", "#", "_self", "./img/2.ico"],

["Menu3", "#", "_self", "./img/3.ico"],

["Menu4", "#", "_self", "./img/4.ico"],

["Menu5", "#", "_self", "./img/5.ico"],

];

nm.nm_createMenu();

}

4.[代码]菜单平均分布

function createMenu2()

{

var targetDom = document.getElementById("targetMenu");

nm = new nice_menu(targetDom);

nm.initScale = 1.0;

nm.distributionType = 0;

nm.delay = 50;

nm.gap = 1;

nm.nm_ItemsData = [

["Menu1", "#", "_self", "./img/1.ico"],

["Menu2", "#", "_self", "./img/2.ico"],

["Menu3", "#", "_self", "./img/3.ico"],

["Menu4", "#", "_self", "./img/4.ico"],

["Menu5", "#", "_self", "./img/5.ico"],

["Menu6", "#", "_self", "./img/6.ico"],

["Menu7", "#", "_self", "./img/7.ico"],

["Menu8", "#", "_self", "./img/8.ico"],

["Menu9", "#", "_self", "./img/9.ico"],

["Menu10", "#", "_self", "./img/ark.ico"]

];

nm.nm_createMenu();

}