###模拟苹果底部的导航菜单小效果1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ 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 aInput = document.getElementsByTagName('input');
var oDiv = document.getElementById('div1');
var aImg = oDiv.getElementsByTagName('img');
document.onmousemove=function(ev){
var ev=ev||event;
for(var i=0;i<aImg.length;i++){
var x = aImg[i].offsetLeft + aImg[i].offsetWidth/2;
var y = aImg[i].offsetTop + aImg[i].offsetHeight/2 + oDiv.offsetTop;
var a=ev.clientX-x;
var b=ev.clientY-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
}
aImg[i].style.width=scale*128+'px';
aImg[i].style.height=scale*128+'px';
aInput[i].value = 'X轴:'+x+',Y轴:' + y;
}
}
};
</script>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<div id="div1">
<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>
</body>
</html>