Javascript 如何将无序列表放置在圆圈中？

我想创建一个类似的页面，但我只是在学习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>

我试图重新创建您在这台电脑上寻找的内容。它肯定不是没有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;

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

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

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);
}

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

}

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

jQuery代码的开头：

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

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

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

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);
}

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

第一个变量

circle\u radius

是圆形菜单本身的半径（而不是单个链接）

$links

获取导航标签中链接的完整列表，并存储导航标签中的链接总数。这对于确定每个链路的位置非常重要

更多jQuery代码：

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

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

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

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);
}

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

我们要做的第一件事是在

$links

中循环每个单独的链接，并向其添加索引值，然后调用

animateCille（…）

。我们传递link元素本身和另一个值（该值将用于鼠标悬停效果）

圆形定位：

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

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

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

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);
}

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

在

动画循环（…）

中，我们首先获得

$link

的索引。然后，我们使用一些好的旧trig来计算

$link

位置的角度（弧度），使用索引和链接总数。接下来，我们使用

弧度来计算
$link
的x和y位置。注意，这里有一个叫做
expansion\u scale
的东西，这就是我们传递给这个函数的内容。现在，这只是1，所以它不会影响x和y值。最后，一旦我们有了x和y值，我们就用新的值设置
$link
的顶部和左侧属性的动画

在鼠标上方设置圆圈动画：

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

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

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

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);
}

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

现在使用
animateCille（…）
可以轻松实现此效果。这就是
expansion\u scale
最终发挥作用的地方。当我们将鼠标移到链接上时，它将调用
animateCircle（…）
，扩展比例为1.5，这使得此特定链接比其他链接移动1.5倍，给您带来整洁的效果。最后，当您将鼠标移出时，它会将链接移回其原始位置
 我试着重现你在这上面寻找的东西。它肯定不是没有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;

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

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

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);
}

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

}

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

jQuery代码的开头：

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

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

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

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);
}

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

第一个变量
circle\u radius
是圆形菜单本身的半径（而不是单个链接）

$links
获取导航标签中链接的完整列表，并存储导航标签中的链接总数。这对于确定每个链路的位置非常重要

更多jQuery代码：

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

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

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

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);
}

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

我们要做的第一件事是在
$links
中循环每个单独的链接，并向其添加索引值，然后调用
animateCille（…）
。我们传递link元素本身和另一个值（该值将用于鼠标悬停效果）

圆形定位：

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

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

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

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);
}

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

在
动画循环（…）
中，我们首先获得
$link
的索引。然后，我们使用一些好的旧trig来计算
$link
位置的角度（弧度），使用索引和链接总数。接下来，我们使用
弧度来计算
$link
的x和y位置。注意，这里有一个叫做
expansion\u scale
的东西，这就是我们传递给这个函数的内容。现在，这只是1，所以它不会影响x和y值。最后，一旦我们有了x和y值，我们就用新的值设置
$link
的顶部和左侧属性的动画

在鼠标上方设置圆圈动画：

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

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

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

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);
}

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

现在使用
animateCille（…）
可以轻松实现此效果。这就是
expansion\u scale
最终发挥作用的地方。当我们将鼠标移到链接上时，它将调用
animateCircle（…）
，扩展比例为1.5，这使得此特定链接比其他链接移动1.5倍，给您带来整洁的效果。最后，当您将鼠标移出时，它会将链接移回其原始位置
 这个菜单也很酷：

试一试，你可以创建一些漂亮的样式应用于它。
这个菜单也很酷：

试试看，你可以创建一些漂亮的样式来应用于它。
你想要静态的还是动态的？我的意思是，总是放在同一个地方，或者？在给定的Url中，圆圈不是css，这是背景中的图像，你可以使用背景中的图像。因为你有一个到示例的链接，我建议你看看源代码，看看它是如何完成的。看这里，你总是可以查看你在网上找到的css/JS奇迹的源代码；）。如果你想做这件事也没关系，但是看起来很可怕。这只是我的观点：）你想要它们是静态的还是动态的？我的意思是，总是放在同一个地方，或者在给定的Url中，圆圈