主要的实现原理:
1.先找到桌面上每个图形的中心点分别到鼠标的距离
2.根据近大远小的原理，距离鼠标距离近的，图像就会大些，距离鼠标距离远的，图像就会小些
代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>苹果菜单</title>
<style>
body,input {margin:0;padding:0;}
#div1{width:100%;margin:0 auto;text-align: center;position:absolute;bottom:0;}
img {width:64px;}
</style>
</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" />
<img src="img/2.png" />
<img src="img/3.png" />
<img src="img/4.png" />
<img src="img/5.png" />
</div>
<script>
/*
1.aImg[i].offsetTop+aImg[i].offsetHeight/2 只是img到div的距离，还要加上div到document
的距离
2.scale要取反一下
3.图片不能无限小，所以scale要进行条件限制一下.
*
*
* */
aIpt=document.getElementsByTagName("input");
oDiv=document.getElementById("div1");
aImg=oDiv.getElementsByTagName("img");
document.οnmοusemοve=function(ev){
for(var i=0;i<aImg.length;i++){
var ev=ev||event;
var x=aImg[i].offsetLeft+aImg[i].offsetWidth/2+oDiv.offsetLeft;
var y=aImg[i].offsetTop+aImg[i].offsetHeight/2+oDiv.offsetTop;
var a=ev.clientX;
var b=ev.clientY;
var dis=Math.sqrt(Math.pow(a-x,2)+Math.pow(b-y,2));
//aIpt[i].value=dis;
var scale=1-dis/400;
if(scale<0.4){
scale=0.4;
}
aIpt[i].value=scale;
aImg[i].style.width=128*scale+"px";
}
}
</script>
</body>
</html>
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
