<!DOCTYPE
html
>
<html
lang=
"en"
>
<head>
<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<title>苹果菜单
</title>
<style>
*{
padding:
0;
margin:
0;}
input{
border:
1px
solid
#333}
#div1{
position:
absolute;
bottom:
0;
text-align:
center;
width:
100%;}
#div
img{
width:
64px;}
<
/style>
</head>
<body>
<script>
window.
onload=
function(){
var
oDiv =
document.
getElementById(
"div1");
var
oImg =
document.
querySelectorAll(
‘img‘);
document.
onmousemove=
function(
ev){
var
ev =
ev||
window.
event;
for(
var
i=
0;
i<
oImg.
length;
i++){
var
x =
oImg[
i].
offsetLeft+
oImg[
i].
offsetWidth/
2;
var
y =
oImg[
i].
offsetTop+
oImg[
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;
}
oImg[
i].
style.
width=
scale*
128 +
‘px‘;
oImg[
i].
style.
height=
scale*
128 +
‘px‘;
}
};
}
<
/script>
<div
id=
"div1"
>
<img
src=
"images/pic1.png"
alt=
""
>
<img
src=
"images/pic2.png"
alt=
""
>
<img
src=
"images/pic3.png"
alt=
""
>
<img
src=
"images/pic4.png"
alt=
""
>
<img
src=
"images/pic5.png"
alt=
""
>
</div>
</body>
</html>
