模仿苹果菜单的导航

最新推荐文章于 2024-07-23 15:23:15 发布

转载最新推荐文章于 2024-07-23 15:23:15 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoxiaosha/p/3826720.html

文章标签：

#c/c++

<DCUTYPE HTML>
<html lang="ch-zn">
<head>
<meta charset='utf-8'>
<title>苹果菜单</title>
<style>
html,body{margin: 0px;padding: 0px;}
#listImg{width: 100%; text-align: center; position: fixed; bottom: 0px;}	

</style>	
</head>	
<body>
<section>
    <input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">		
</section>
<section id='listImg'>
	<img src="image/1.png" width="64" alt="">
	<img src="image/2.png" width="64" alt="">
	<img src="image/3.png" width="64" alt="">
	<img src="image/4.png" width="64" alt="">
	<img src="image/5.png" width="64" alt="">
</section>
<script>
window.onload = function(){
	var obj = document.getElementById('listImg');
	var oImg = obj.getElementsByTagName('img');
	var oText = document.getElementsByTagName('input');
	document.onmousemove = function(ev){
		var ev = ev||event;
	    for(var i = 0;i<oImg.length;i++){
	    	var PageX = ev.clientX;
		    var PageY = ev.clientY;
	        var X = oImg[i].offsetLeft + oImg[i].offsetWidth/2;
	        var Y = getPos(oImg[i])+oImg[i].offsetHeight/2;
	        var a = PageX - X;
	        var b = PageY - Y;
			var C = Math.sqrt(Math.pow(a,2) + Math.pow(b,2)); 
			var scale =1 - C/300;
			if(scale<0.5){
				scale = 0.5;
			}
			oImg[i].style.width = scale * 128 +'px';
			oImg[i].style.height = scale * 128 +'px';
			oText[i].value = scale.toFixed(2);
		}
	}
}	
function getPos(obj){
	var iH = 0;
	while(obj){
		iH += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return iH;
}
</script>	
</body>
</html>

转载于:https://www.cnblogs.com/xiaoxiaosha/p/3826720.html