js左上角扇形旋转菜单特效代码下载


js左上角扇形旋转菜单特效代码下载
js左上角扇形旋转菜单特效代码下载以及左上角、扇形旋转菜单等js/jquery网页特效代码下载。

1. HTML代码

<div class="menuHolder">
<div class="menuWindow">
	<ul class="p1">
		<li class="s1"><a href="javascript:;">导航菜单</a>
			<ul id="p2" class="p2">
				<li class="s2"><a href="javascript:;"><span>互联网网站资源管理</span></a>
					<ul class="p3 a3">
						<li><a href="javascript:;">打印</a></li>
						<li><a href="javascript:;">编辑</a></li>
						<li><a href="javascript:;">保管</a></li>
					</ul>
				</li>
				<li class="s2"><a href="javascript:;"><span>移动互联网应用管理</span></a>
					<ul class="p3 a3">
						<li><a href="javascript:;">打印</a></li>
						<li><a href="javascript:;">编辑</a></li>
						<li><a href="javascript:;">保管</a></li>
					</ul>
				</li>
				<li class="s2"><a href="javascript:;"><span>微信公众号监测</span></a>
					<ul class="p3 a6">
						<li><a href="javascript:;">支持</a></li>
						<li><a href="javascript:;">销售</a></li>
						<li><a href="javascript:;">购买</a></li>
						<li><a href="javascript:;">摄影师</a></li>
						<li><a href="javascript:;">零售商</a></li>
						<li><a href="javascript:;">常规</a></li>
					</ul>
				</li>
				<li class="s2"><a href="javascript:;"><span>信息安全风险监测</span></a>
					<ul class="p3 a3">
						<li><a href="javascript:;">南区</a></li>
						<li><a href="javascript:;">北区</a></li>
						<li><a href="javascript:;">中心区</a></li>
					</ul>
				</li>
				<li class="s2"><a href="javascript:;"><span>协同联动</span></a>
					<ul class="p3 a3">
						<li><a href="javascript:;">邮箱</a></li>
						<li><a href="javascript:;">邮递</a></li>
						<li><a href="javascript:;">电话</a></li>
					</ul>
				</li>
				<li class="s2 "><a href="javascript:;"><span>综合管理</span></a>
					<ul class="p3 a5">
						<li><a href="javascript:;">数码单反机身</a></li>
						<li><a href="javascript:;">镜头</a></li>
						<li><a href="javascript:;">闪光枪</a></li>
						<li><a href="javascript:;">三角架</a></li>
						<li><a href="javascript:;">过滤器</a></li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>
</div>
<script>
var menu = [
	{
		title: '互联网网站资源管理',
		subtitle: ['一级菜单', '二级菜单', '三级菜单']
	},
	{
		title: '移动互联网应用管理',
		subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
	},
	{
		title: '微信公众号监测',
		subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
	},
	{
		title: '信息安全风险监测',
		subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
	},
	{
		title: '协同联动',
		subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
	},
	{
		title: '综合管理',
		subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
	},
	{
		title: '智慧党建',
		subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
	},
	{
		title: '信息发布',
		subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
	},
	{
		title: '共享知识库',
		subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
	},
	{
		title: '共享知识库',
		subtitle: ['一级菜单', '二级菜单', '三级菜单', '四级菜单']
	}
]
renderMenu(menu)
function renderMenu(menu) {
	var lis = ''
	const deg = 90
	var p2 = document.getElementById('p2')
	for (var i = 0; i < menu.length; i++) {
		var sublis = ''
		var rotateDeg = deg / menu.length
		for (var j = 0; j < menu[i].subtitle.length; j++) {
			var subrotateDeg = deg / menu[i].subtitle.length
			var lineHeight = 600/menu[i].subtitle.length + 40
			sublis += '<li>' +
				'<a style="transform: rotate(' + (subrotateDeg * j) + 'deg);line-height:'+lineHeight+'px" href="javascript:;">' +
				'<span>' + menu[i].subtitle[j] + '</span>' +
				'</a>' +
				'</li>'
		}
		var ul = ' <ul class="p3 a' + menu[i].subtitle.length + '">' + sublis + '</ul>'
		lis += '<li class="s2">' +
			'<a style="transform: rotate(' + (rotateDeg * i) + 'deg);" href="javascript:;"><span>' + menu[i].title + '</span></a>' +
			'' + ul + '' +
			'</li>'
	}
	p2.innerHTML = lis
}
</script>

相关推荐

发表评论

相关文章