20170403苹果桌面菜单 - LiangYiDong/study GitHub Wiki

<script src="../jquery-1.7.1.js"></script>
<style>
	#nav_warp{
		width:100%;
		position: absolute;
		bottom:0;
		text-align: center;
	}
	.nav_item{
		height: 80px;
		width:80px;
		background: red;
		border-radius: 50%;
		margin: 10px;
		display: inline-block;
	}
	
</style>
<script>
$(document).ready(function(){
	var myNav = {
		init: function(){
			document.onmousemove = function (ev) {
				var ev = ev ||event,
					x = ev.clientX,
					y = ev.clientY,
					oTop = document.getElementById("nav_warp").offsetTop;
				$(".nav_item").each(function(i,item){
					var a = item.offsetTop + item.offsetHeight/2 + oTop - y,
						b = item.offsetLeft+item.offsetWidth/2 - x,
						dis = Math.sqrt(a*a+b*b),
						scale = (1- dis/300)<0.5? 0.5:(1- dis/300);
					$(".nav_item").eq(i).css({"width":scale*160,"height":scale*160});
					$("input").eq(i).val(scale);
				});
			}				
		}
	};
	myNav.init();
});
</script>