js模拟苹果dock效果

最新推荐文章于 2022-10-02 11:17:48 发布

iteye_6517

最新推荐文章于 2022-10-02 11:17:48 发布

阅读量316

点赞数

CC 4.0 BY-SA版权

分类专栏： JS特效

本文链接：https://blog.youkuaiyun.com/iteye_6517/article/details/82574457

JS特效专栏收录该内容

0 篇文章

订阅专栏

<html>
<head>
<meta charset="utf-8">
<style>
* {margin:0; padding:0;}
#div1 {position:absolute; bottom:0; width:100%; text-align:center;}
input {font-size:20px; width:160px;}
</style>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	var aTxt=document.getElementsByTagName('input');
	var aImg=document.getElementsByTagName('img');
	
	document.onmousemove=function (ev)
	{
		var oEvent=ev||event;
		
		for(var i=0;i<aImg.length;i++)
		{
			var l=aImg[i].offsetLeft+aImg[i].offsetWidth/2;
			var t=aImg[i].offsetTop+oDiv.offsetTop+aImg[i].offsetHeight/2;
			
			
			var a=l-oEvent.clientX;
			var b=t-oEvent.clientY;
			
			//pow
			var dis=Math.sqrt(a*a+b*b);
			
			var scale=1-dis/300;//300可以设置感应区的大小，scale是放大系数，距离和放大宽度成反比
			
			if(scale<0.5)
			{
				scale=0.5;
			}
			
			aImg[i].width=128*scale;
			
			aTxt[i].value=scale.toFixed(2);
		}
	};
};
</script>
</head>

<body>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<div id="div1">
    <img src="img/1.png" width="64" />
    <img src="img/2.png" width="64" />
    <img src="img/3.png" width="64" />
    <img src="img/4.png" width="64" />
    <img src="img/5.png" width="64" />
</div>
</body>
</html>