苹果桌面图标效果是个鼠标移上去,图标变大,距离鼠标越远则图标的大小越接近于原始大小,越近则越大!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>苹果菜单</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#div1 {
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<img src="img/1.jpg" width="64" />
<img src="img/2.jpg" width="64" />
<img src="img/3.jpg" width="64" />
<img src="img/4.jpg" width="64" />
<img src="img/5.jpg" width="64" />
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
/*
document.onmousemove = function(e) {
e = e || event;
var aImgs = document.getElementsByTagName('img'),
oDiv=document.getElementById('div1');
for (var i = 0, l = aImgs.length; i < l; i++) {
//计算鼠标当前位置与各图片中心位置在x,y轴方向的距离
var a=aImgs[i].offsetLeft+aImgs[i].offsetWidth/2-e.clientX,
b=aImgs[i].offsetTop+aImgs[i].offsetHeight/2+oDiv.offsetTop-e.clientY;
//两点之间的距离
var dis=Math.sqrt(a*a+b*b);
var scale=(1-dis/600).toFixed(2); //距离越小则图片越大
if(scale<0.5){
scale=0.5; //防止图片直接消失
}
aImgs[i].width=scale*128;
}
};*/
$(document).mousemove(function(e){
var aDis=[];
//计算鼠标当前位置与图片中心位置的距离,距离越小则图片越大,否则越小
$('img').each(function(k,v){
var x=e.pageX-$(this).offset().left,
y=e.pageY-$(this).offset().top,
dis=Math.sqrt(x*x+y*y);
aDis.push(parseInt(dis));
});
var max=Math.max.apply(Math,aDis);
$.each(aDis, function(k,v) {
var scale=1-v/max;
//防止图片消失
if(scale<0.5){
scale=0.5;
}
$('img').eq(k).width(128*scale);
});
});
</script>
</body>
</html>