JavaScript蘋果菜單是一種常見的前端界面交互效果。它主要通過JS語言實現對鼠標的位置和點擊事件的捕獲和響應，讓
下面我們來看一下如何構建一個基本的JavaScript蘋果菜單：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript蘋果菜單</title>
<style type="text/css">
nav {
width: 400px;
margin: 50px auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
position: relative;
width: 100px;
height: 100px;
margin-right: 10px;
}
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.zoom {
position: absolute;
top: -50px;
left: -50px;
width: 200%;
height: 200%;
z-index: -1;
}
</style>
</head>
<body>
<nav>
<ul>
<li><img src="1.jpg"><div class="zoom"><img src="1.jpg"></div></li>
<li><img src="2.jpg"><div class="zoom"><img src="2.jpg"></div></li>
<li><img src="3.jpg"><div class="zoom"><img src="3.jpg"></div></li>
<li><img src="4.jpg"><div class="zoom"><img src="4.jpg"></div></li>
</ul>
</nav>
<script>
var nav = document.querySelector('nav');
var lis = nav.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
var imgs = this.querySelectorAll('img');
var img0 = imgs[0];
var img1 = imgs[1];
img0.style.transform = 'scale(2)';
img1.style.opacity = 1;
};
lis[i].onmouseleave = function() {
var imgs = this.querySelectorAll('img');
var img0 = imgs[0];
var img1 = imgs[1];
img0.style.transform = 'none';
img1.style.opacity = 0;
};
}
</script>
</body>
</html>在這段代碼中，我們使用了CSS3的border-radius屬性和transition動畫屬性來制作圖片的圓形效果和縮放效果。在JS代碼中，我們通過querySelector和querySelectorAll方法獲取了
需要注意的是，在以上代碼中，我們在菜單項下增加了
標簽，并在其中嵌套了一張圖片，用以顯示放大后的圖片。這個標簽的作用是讓放大后的圖片超出菜單項的外框，從而形成了放大鏡的效果。
總的來說，JavaScript蘋果菜單是一個比較有趣的前端交互效果，它不僅可以提升用戶的體驗，還可以增加頁面的美觀性。我們可以通過不斷地嘗試和創新，讓菜單效果更加豐富多彩。