原生js实现苹果菜单

html代码：

<div class="box">
<img src="img/11.jpg" alt="" />
<img src="img/14.jpg" alt="" />
<img src="img/23.jpg" alt="" />
<img src="img/25.jpg" alt="" />
<img src="img/27.jpg" alt="" />
</div>

简单的样式修饰

<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
img{
width:88px;
}
</style>

js代码：

<script type="text/javascript">
var oImg = document.querySelectorAll("img");//获取dom元素
var oBox = document.getElementsByClassName("box")[0];
document.onmousemove = function(e){//鼠标移动事件
var evt = e || event;  //兼容
var x = evt.clientX;  //鼠标点
var y = evt.clientY;

for (var i = 0; i < oImg.length; i++) {
var disx = x - oImg[i].offsetLeft -oImg[i].offsetWidth/2;//判断鼠标距离图片(每个)的横向距离
var disy = y - oImg[i].offsetTop- oImg[i].offsetHeight/2 - oBox.offsetTop;//判断鼠标距离图片(每个)的纵向距离
var dis = Math.sqrt(Math.pow(disx,2)+Math.pow(disy,2));//计算鼠标距离图片的实际距离（与勾股定理同理）

if(dis < 300){//判断鼠标距离图片多远时，让图片产生变化
oImg[i].style.width = 88 + (1-dis/300)*88 + "px";
//88是图片高宽 ，实现鼠标在条件满足时，鼠标离图片越远，则图片越小；反之，同理
}else{
oImg[i].style.width = "88px ";
}
}
}

运行结果：

• 点赞
• 收藏
• 分享
• 文章举报