本人学了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();
}