js实例之苹果电脑菜单效果(鼠标移入图片放大)

mnblue
mnblue 发布于 2017-01-09 16:00:01 浏览:403 类型:原创 - 随笔 分类:JavaScript - JavaScript 实例 二维码: 作者原创 版权保护
主要是利用勾股定理算出鼠标每个图片的距离,然后利用这个得出比例;

Math.pow(a,2)  a的平方
Math.sqrt(a)  a的开方

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		body{margin: 0; padding: 0;}
		#div1{width: 100%; height: auto;position: absolute; bottom: 0;text-align: center;}
		#div1 img{width: 64px;}
	</style>
	<script>
		window.onload=function()
		{
			var oDiv=document.getElementById('div1');
			var aImg=oDiv.getElementsByTagName('img');
			document.onmousemove=function(ev){
				var ev=ev ||window.event;
				for(var i=0;i<aImg.length;i++)
				{
					//获得每个图片的中心点
					var  x=aImg[i].offsetLeft+aImg[i].offsetWidth/2;
					//因为图片的父级有定位,因此还要加上父级到body的距离
					var y=aImg[i].offsetTop+aImg[i].offsetHeight/2+oDiv.offsetTop;  
	
					//利用勾股定理,已知a,b边,得到c边
					//c边为当前鼠标位置和每个图片中心点的连线,离得越近,线越短
					var a=ev.clientX-x;
					var b=ev.clientY-y;
					var c=Math.sqrt(Math.pow(a,2)+Math.pow(b,2)); 
					//得到一个0-1的比例
					var scale=1-c/400;
					if(scale<0.5)
					{
						scale=0.5;
					}else if(scale>1)
					{
						scale=1;
					}
					aImg[i].style.width=128*scale+'px';
				}
			}
		
		}
	</script>
	<body>
		<div id="div1">
		 <img src="img/img/facetime.png"  alt="facetime"/>
		 <img src="img/img/appstore.png"  alt="appstore"/>
		 <img src="img/img/ibooks.png"  alt="ibooks"/>
		 <img src="img/img/launchpad.png"  alt="launchpad"/>
		 <img src="img/img/messages.png"  alt="messages"/>
		 <img src="img/img/safari.png"  alt="safari"/>
		</div>
	</body>
</html>
标签:
z
给个赞 1 人点赞
收藏 3 人收藏
评论 已有 1 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
zhaoyanxiansen
zhaoyanxiansen2017-01-09 17:54:191F
厉害。可惜图片不能显示,不想上传图片可以去网上转成beas64
举报 支持 (0) 回复 (0)
mnblue mnblue 作者

作者最新