javascript - jQuery 圆形菜单

Question

任何有想法使列表项绕圈旋转的人。

我正在使用这个 jQuery 代码将元素组织成圆形，现在我需要让它们无限旋转。

    var type = 1,
        radius = '18em', 
        start = -90, 
        $elements = $('ul li'),
        numberOfElements = (type === 1) ? $elements.length : $elements.length - 1,
        slice = 360 * type / numberOfElements;

    $elements.each(function (i) {
        var $self = $(this),
            rotate = slice * i + start,
            rotateReverse = rotate * -1;

            $self.css({
                'transform': 'rotate(' + rotate  + 'deg) translate(' + radius + ') rotate(' + rotateReverse + 'deg)'
            }); 
    });

这是codepen https://codepen.io/pen/jOELYdW。

标签： javascriptjqueryhtmlcss

Answer 1

要使用 jQuery，您可以使用 data 属性存储每个项目的当前旋转度数。

$item.data('degree', degree);

此外，您应该设置一个间隔来计算每个间隔中项目的新度数。

var $menu = $('#circle'),
    $items = $menu.children('.item'),
    itemCount = $items.length,
    eachSlice = 360 / itemCount;

// ...

// calculate new degree in set interval
currentDegree = $item.data('degree'),
newDegree = currentDegree + eachSlice;

您可以在以下代码段中看到完整的源代码

$(document).ready(function () {

    var $menu = $('#circle'),
        $items = $menu.children('.item'),
        itemCount = $items.length,
        eachSlice = 360 / itemCount;

    $items.each(function(index, item) {

        var $item = $(item),
            $itemContent = $item.children('.item-content'),
            degree = index * eachSlice;

        $item
            .css({
                'transform' : 'rotate(' + degree + 'deg)'
            })
            .data('degree', degree);

        $itemContent
            .css({
                'transform': 'rotate(' + degree * -1 + 'deg)'
            });

        setTimeout(() => {
            $itemContent.addClass('transition');
            $item.addClass('transition');
        }, 100);

    });

    setInterval(() => {

        $items.each(function (index, item) {

            var $item = $(item),
                $itemContent = $item.children('.item-content'),
                currentDegree = $item.data('degree'),
                newDegree = currentDegree + eachSlice;
                
            $item
                .css({
                    'transform': 'rotate(' + newDegree + 'deg)'
                })
                .data('degree', newDegree);

            $itemContent
                .css({
                    'transform': 'rotate(' + newDegree * -1 + 'deg)'
                });

        });

    }, 2000);

});

#circle {
  border: 1px solid #ccc;
  border-radius: 50%;
  height: 500px;
  margin: 50px auto;
  position: relative;
  width: 500px;
}

.item {
  border: 1px solid #a55;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  height: 80px;
  justify-content: center;
  left: -40px;
  position: absolute;
  transform-origin: calc(250px + 40px) 40px;
  text-align: center;
  
  top: calc(50% - 40px);
  width: 80px;
}

.transition {
    transition: 2s linear;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
<div id="circle">
    <div class="item" id="item-1">
        <span class="item-content">Item 1</span>
    </div>
    <div class="item" id="item-2">
        <span class="item-content">Item 2</span>
    </div>
    <div class="item" id="item-3">
        <span class="item-content">Item 3</span>
    </div>
    <div class="item" id="item-4">
        <span class="item-content">Item 4</span>
    </div>
    <div class="item" id="item-5">
        <span class="item-content">Item 5</span>
    </div>
    <div class="item" id="item-6">
        <span class="item-content">Item 6</span>
    </div>
</div>