苹果菜单

yinmeizhuang

于 2019-11-10 22:08:04 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/yinmeizhuang/article/details/103002964

版权

<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="images/1.png" />
		<img src="images/2.png" />
		<img src="images/3.png" />
		<img src="images/4.png" />
		<img src="images/5.png" />
	</div>
	<script>

var oBox =document.getElementById("box");
			var aImg = oBox.children;
			document.onmousemove = function(e){
				var evt = e || event;
				var x = evt.clientX;
				var y = evt.clientY;
				
				for(var i = 0; i < aImg.length; i++){
					var disX = x - aImg[i].offsetWidth/2 - aImg[i].offsetLeft;
					var disY = y - aImg[i].offsetHeight/2 - aImg[i].offsetTop-oBox.offsetTop;
					var dis = Math.sqrt(Math.pow(disX,2)+Math.pow(disY,2));
					
					if(dis<300){
						aImg[i].style.width = 64+(1-dis/300)*64+"px";
					}else{
						aImg[i].style.width = "64px";
					}
				}
				
			}

	</script>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yinmeizhuang

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
苹果菜单

<head> <meta charset="UTF-8"> <title>苹果菜单练习</title> <style>body{ margin: 0; padding: 0; } #box { width: 100%; height: auto; position: abs...
复制链接

扫一扫