jQuery液态式手机端环形按钮导航菜单代码

JS代码

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
<script type="text/javascript">
	$(document).ready(function(){
		var menuItemNum=$(".menu-item").length;
		var angle=120;
		var distance=90;
		var startingAngle=180+(-angle/2);
		var slice=angle/(menuItemNum-1);
		TweenMax.globalTimeScale(0.8);
		$(".menu-item").each(function(i){
			var angle=startingAngle+(slice*i);
			$(this).css({
				transform:"rotate("+(angle)+"deg)"
			})
			$(this).find(".menu-item-icon").css({
				transform:"rotate("+(-angle)+"deg)"
			})
		})
		var on=false;

		$(".menu-toggle-button").mousedown(function(){
			TweenMax.to($(".menu-toggle-icon"),0.1,{
				scale:0.65
			})
		})
		$(document).mouseup(function(){
			TweenMax.to($(".menu-toggle-icon"),0.1,{
				scale:1
			})
		});
		$(document).on("touchend",function(){
			$(document).trigger("mouseup")
		})
		$(".menu-toggle-button").on("mousedown",pressHandler);
		$(".menu-toggle-button").on("touchstart",function(event){
			$(this).trigger("mousedown");
			event.preventDefault();
			event.stopPropagation();
		});

		function pressHandler(event){
			on=!on;

			TweenMax.to($(this).children('.menu-toggle-icon'),0.4,{
				rotation:on?45:0,
				ease:Quint.easeInOut,
				force3D:true
			});

			on?openMenu():closeMenu();
			
		}
		function openMenu(){
			$(".menu-item").each(function(i){
				var delay=i*0.08;

				var $bounce=$(this).children(".menu-item-bounce");

				TweenMax.fromTo($bounce,0.2,{
					transformOrigin:"50% 50%"
				},{
					delay:delay,
					scaleX:0.8,
					scaleY:1.2,
					force3D:true,
					ease:Quad.easeInOut,
					onComplete:function(){
						TweenMax.to($bounce,0.15,{
							// scaleX:1.2,
							scaleY:0.7,
							force3D:true,
							ease:Quad.easeInOut,
							onComplete:function(){
								TweenMax.to($bounce,3,{
									// scaleX:1,
									scaleY:0.8,
									force3D:true,
									ease:Elastic.easeOut,
									easeParams:[1.1,0.12]
								})
							}
						})
					}
				});

				TweenMax.to($(this).children(".menu-item-button"),0.5,{
					delay:delay,
					y:distance,
					force3D:true,
					ease:Quint.easeInOut
				});
			})
		}
		function closeMenu(){
			$(".menu-item").each(function(i){
				var delay=i*0.08;

				var $bounce=$(this).children(".menu-item-bounce");

				TweenMax.fromTo($bounce,0.2,{
					transformOrigin:"50% 50%"
				},{
					delay:delay,
					scaleX:1,
					scaleY:0.8,
					force3D:true,
					ease:Quad.easeInOut,
					onComplete:function(){
						TweenMax.to($bounce,0.15,{
							// scaleX:1.2,
							scaleY:1.2,
							force3D:true,
							ease:Quad.easeInOut,
							onComplete:function(){
								TweenMax.to($bounce,3,{
									// scaleX:1,
									scaleY:1,
									force3D:true,
									ease:Elastic.easeOut,
									easeParams:[1.1,0.12]
								})
							}
						})
					}
				});
				

				TweenMax.to($(this).children(".menu-item-button"),0.3,{
					delay:delay,
					y:0,
					force3D:true,
					ease:Quint.easeIn
				});
			})
		}
	})
</script>