jQuery液态式环形按钮菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery液态式环形按钮菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery液态式环形按钮菜单特效</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="htmleaf-container">
	<div class='content'>
		<div class='menu'>
		  <div class='menu-wrapper'>
			<ul class='menu-items'>
			  <li class='menu-item'>
				<button class='menu-item-button'>
				  <i class='fa fa-reply-all'></i>
				</button>
				<div class='menu-item-bounce'></div>
			  </li>
			  <li class='menu-item'>
				<button class='menu-item-button'>
				  <i class='fa fa-inbox'></i>
				</button>
				<div class='menu-item-bounce'></div>
			  </li>
			  <li class='menu-item'>
				<button class='menu-item-button'>
				  <i class='fa fa-trash'></i>
				</button>
				<div class='menu-item-bounce'></div>
			  </li>
			</ul>
			<button class='menu-toggle-button'>
			  <i class='fa fa-plus menu-toggle-icon'></i>
			</button>
		  </div>
		</div>
	  </div>
</div>

<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>
</body>
</html>

CSS代码(style.css):

body{background:#2a2b30;}
.menu{width:300px;height:200px;margin:0 auto 100px;position:relative;-webkit-transform:translateZ(0);transform:translateZ(0);}
.menu-wrapper{position:absolute;left:50%;bottom:10px;}
.menu-toggle-button,.menu-item-bounce,.menu-item-button{background:#4f4f64;border-radius:50%;width:80px;height:80px;margin-left:-40px;margin-top:-40px;height:80px;color:#fff;border:none;outline:none;position:relative;}
.menu-toggle-button{background:transparent;position:absolute;top:0;left:0;}
.menu-toggle-icon{font-size:30px;position:absolute;top:0;left:0;width:80px;height:80px;line-height:80px;}
.menu-items{list-style-type:none;padding:0;margin:0;position:absolute;left:0;top:0;}
.menu-item{position:absolute;top:0;left:0;width:0;height:0;}
.menu-item-bounce{position:absolute;top:0;left:0;}
.menu-item-button{width:60px;height:60px;margin-left:-30px;margin-top:-30px;position:absolute;top:0;left:0;color:#AD4C4C;}
.menu-item-button .fa{font-size:1.5rem;color:#fff;}
.menu-item-button .fa-inbox{transform:rotate(182deg);}
.menu-item-button .fa-reply-all{transform:rotate(-120deg);}
.menu-item-button .fa-trash{transform:rotate(120deg);}

附件:下载该文件资源,减少时间成本(增值服务)