如何在圆中定位无序列表

how to position an unordered list in a circle?

本文关键字：定位 无序 列表      更新时间：2023-09-26

我想创建一个这样的页面，但我只是学习javascript/jquery。我真的很喜欢这个菜单，但是我不知道如何将无序的菜单列表定位在一个圆圈中，然后如何使悬停效果。

下面是html菜单:

        <nav>
            <ul>
                <li><a href="#">Menu1</a></li>
                <li><a href="#">Menu2</a></li>
                <li><a href="#">Menu3</a></li>
                <li><a href="#">Menu4</a></li>
                <li><a href="#">Menu5</a></li>
                <li><a href="#">Menu6</a></li>
            </ul>
        </nav>

我试图在这个jsFiddle页面上重新创建您正在寻找的内容。它肯定不是没有bug，但希望它能帮助您理解制作循环列表所需的jQuery和CSS。

CSS: 

a {
position: absolute;
text-decoration: none;
border: 1px solid black;
width:98px;
height:98px;
border-radius:50px;
line-height:100px;
text-align:center;

}

我已经以绝对的方式定位了链接，这样我们就可以操纵它们的顶部/左侧位置。宽度和高度大约是边界半径的一半，这将为每个链接提供圆形。css的其余部分用于定位文本。

jQuery代码开始:

$(function() {
circle_radius = 100;
$links = $('nav ul li a');
total_links = $links.size();

第一个变量circle_radius是圆形菜单本身的半径(而不是单个链接)。

$links获取nav标签中链接的完整列表，total_links存储该nav中有多少链接。这对于确定每个链接的位置非常重要。

更多jQuery代码:

$links.each(function(index) {
    $(this).attr('data-index',index);
    animateCircle($(this), 1);
});

我们要做的第一件事是循环遍历$links中的每个单独链接，并向其添加索引值并调用animateCircle(...)。我们传递link元素本身和另一个值(这个值将用于鼠标悬停效果)。

圆圈定位:

function animateCircle($link, expansion_scale) {
    index = $link.attr('data-index');
    radians = 2*Math.PI*(index/total_links);
    x = -(Math.sin(radians)*circle_radius*expansion_scale);
    y = -(Math.cos(radians)*circle_radius*expansion_scale);
    $link.animate({
        top: x+'px',
        left: y+'px'
    }, 200);
}

在animateCircle(...)中，我们首先获得$link的索引。然后，我们使用一些好的旧三角来计算$link位置的角度(以弧度为单位)，使用索引和总链接数。接下来，我们使用radians来计算$link的x和y位置。注意，我这里有一个叫做expansion_scale的东西，它是我们传递给这个函数的。现在，这只是1，所以它不影响x和y的值。最后，一旦我们有了x和y值，我们用新值动画$link的顶部和左侧属性。

鼠标悬停时的圆形动画:

$('li a').hover(function() {
    animateCircle($(this), 1.5)
}, function() {
    animateCircle($(this), 1)
});

这个效果现在很容易用animateCircle(...)实现。这就是expansion_scale最终发挥作用的地方。当我们将鼠标移到链接上时，它将调用animateCircle(...), expansion_scale为1.5，这使得该特定链接比其他链接移动1.5倍，从而为您提供简洁的效果。最后，当您将鼠标移出时，它会将链接移回其原始位置。

这个菜单也很酷:https://github.com/liri/moonMenuJS

尝试一下，你可以创建一些不错的样式应用在上面。

相关文章：