在前端开发中，通过实现动态的交互效果可以提高用户体验和页面吸引力。本文将介绍如何使用 jQuery 实现一个圆形菜单的展开收缩效果。
功能需求
我们希望在页面上实现一个圆形菜单，当用户点击菜单按钮时，菜单会从中心点向外展开，再次点击时则会收缩回去。同时，每个菜单项都应该有自己的图标和提示文字。
实现步骤
HTML 结构
首先，在 HTML 中定义一个包含菜单按钮和菜单项的结构：
-- -------------------- ---- -------
---- --------------------
------- -------------------------------
--- -------------------
------ ----------- --------- ------------- -----------
------ ----------- --------- ------------- -------------
------ ----------- --------- ------------ -----------
------ ----------- --------- ----------------- -----------
------ ----------- --------- ----------------- -----------
-----
------其中，circle-menu 类表示整个圆形菜单的容器，menu-button 和 menu-items 类分别表示菜单按钮和菜单项的容器。每个菜单项中都包含一个带有图标的 <a> 标签。
CSS 样式
接下来，我们需要对 HTML 结构进行样式布局。在这里，我们将使用 CSS3 中的 transform 属性实现旋转和位移效果，同时也会使用到一些基本的 CSS 属性：
-- -------------------- ---- ------- ------------ - --------- ------ ------- ----- ------ ----- ------ ----- ------- ----- -------------- ---- ----------------- ----- ----------- --- --- --- ------- -- -- ----- - ------------ - --------- --------- ---- ---- ----- ---- ---------- --------------- ------ ------ ----- ------- ----- -------------- ---- ----------------- ----- ------ ----- ---------- ----- ------- -------- - ----------- - --------- --------- ---- ---- ----- ---- ---------- --------------- ----- --------- -------- -- ------- -- ----------- ----- ----------- ------- - ----------- -- - -------- ------ -------------- ----- ---------- -------------- - ----------- - - -------- ------ -------- --- ----- -------------- ----- ----------------- ----- ------ ----- ---------- ----- ---------------- ----- - ----------- - - - ------------- ---- -
在上述代码中，我们使用 position 属性将菜单容器固定在页面右下角，然后设置圆形的样式和阴影效果。菜单按钮使用绝对定位并居中显示，菜单项则通过 transform 属性实现旋转、缩放和位移等动画效果。
JavaScript 代码
最后，我们需要编写一些 JavaScript 代码来处理菜单的展开与收缩逻辑。在这里，我们可以使用 jQuery 的 click() 方法来监听菜单按钮的点击事件，并通过 animate() 方法来实现菜单项的展开和收缩：
$(document).ready(function() {
$('.menu-button').click(function() {
$('.menu-items').
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/1480) ，转载请注明来源
[https://www.javascriptcn.com/post/1480](https://www.javascriptcn.com/post/1480)