核心提示：苹果菜单，根据离鼠标远近变大变小功能的代码实现!DOCTYPE html html head meta charset=utf-8 / title苹果菜单/title style type=te...
苹果菜单，根据离鼠标远近变大变小功能的代码实现
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8" />
<title>苹果菜单</title>
<style type="text/css">
body {
margin: 0px;
padding: 0;
}
#p1 {
text-align: center;
position: absolute;
bottom: 10px;
width: 800px;
margin: 0 auto;
}
#p1 img {
border: none;
}
</style>
</head>
<body>
<p id="p1">
<a href="#"><img src="images/1.png" width="64" /></a>
<a href="#"><img src="images/2.png" width="64" /></a>
<a href="#"><img src="images/3.png" width="64" /></a>
<a href="#"><img src="images/4.png" width="64" /></a>
<a href="#"><img src="images/5.png" width="64" /></a>
</p>
<script type="text/javascript">
var p1 = document.getElementById("p1");
var imgs =document.getElementsByTagName("img");
var chang = 200;
document.onmousemove = function(e){
var eve = e || event;
var x = eve.clientX;
var y = eve.clientY;
for(var i = 0;i<imgs.length;i++){
var xbian = x - imgs[i].offsetLeft - imgs[i].offsetWidth/2;
var ybian = y - p1.offsetTop - imgs[i].offsetTop - imgs[i].offsetHeight/2;
var zbian = Math.sqrt( Math.pow(xbian,2) + Math.pow(ybian,2) );
if(zbian<=chang){
console.log(imgs[i].offsetTop)
imgs[i].style.width = 64 + 64*(1-zbian/chang) + "px";
}else{
imgs[i].style.width = "64px";
}
}
}
</script>
</body>
</html>
