简单实现一个苹果菜单

最新推荐文章于 2019-07-26 12:36:16 发布

fengGer的bugs

最新推荐文章于 2019-07-26 12:36:16 发布

阅读量348

点赞数

分类专栏： js简单案例文章标签：简易苹果菜单

本文链接：https://blog.csdn.net/qq_41224512/article/details/86427132

版权

js简单案例专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<head>
	<meta charset="UTF-8">
	<title>苹果菜单练习</title>
	<style>
		body{
			margin: 0;
			padding: 0;
		}
		#box {
			width: 100%;
			height: auto;
			position: absolute;
			bottom: 0;
			text-align: center;
		}
		#box img {
			width: 64px;
		}
	</style>
</head>

<body>
	<div id="box">
		<img src="img/1.png" />
		<img src="img/2.png" />
		<img src="img/3.png" />
		<img src="img/4.png" />
		<img src="img/5.png" />
	</div>
	<script>
		window.function(){
			var oDiv=document.getElementById("box");
			var aImg=document.getElementsByTagName("img");
			document.onmousemove = function(event) {
				var event = event || window.event;
				for(i = 0; i < aImg.length; i++) {
					var a = event.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;
					var b = event.clientY - oDiv.offsetTop - aImg[i].offsetHeight / 2;
					// aImg[i].offsetTop (为0)
					//	var b = event.clientY - aImg[i].offsetTop（可写可不写） - oDiv.offsetTop - aImg[i].offsetHeight / 2;
					var c = Math.sqrt(a * a + b * b); //鼠标到图片中心点的距离
					var scale = 1 - c / 300;   //缩放比例  
					if(scale < 0.5) {
						scale = 0.5;
					}
					aImg[i].style.width = scale * 128 +"px";
				}
			}
		}
	</script>
</body>