旋转列表<li>的图像放置在一个圆圈上点击任何孩子到一个给定的位置

Question

我已经安排了一个使用css转换的圆圈上的图像列表。我想要的是，当单击列表中的任何子图像时，圆圈旋转，所选的或活动的子图像到达给定位置。比如说3点钟。如何使用js实现这一目标。我现在不认识sass

这就是我现在得到的。

当单击任何子图像时，我希望圆圈旋转，这样活动图像总是处于相同的位置。3点钟

<div class="team-list">
    <ul>
       <li class="wow active zoomIn" data-wow-duration="1s" data-wow-delay=".1s">
            <a href="#team-1" data-team="team-1">
               <figure>
                      <img src="https://dummyimage.com/640x4:3/" alt="Team Member image One">
               </figure>
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay=".3s">
            <a href="#team-2" data-team="team-2">
               <figure>
                       <img src="https://dummyimage.com/640x4:3/" alt="Team Member image two">
               </figure>
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay=".5s">
            <a href="#team-3" data-team="team-3">
               <figure>
                      <img src="https://dummyimage.com/640x4:3/" alt="Team Member image three">
              </figure>
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay=".7s">
            <a href="#team-4" data-team="team-4">
               <figure>
                      <img src="https://dummyimage.com/640x4:3/" alt="Team Member image four">
               </figure>
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay=".9s">
            <a href="#team-5" data-team="team-5">
               <figure>
                      <img src="https://dummyimage.com/640x4:3/" alt="Team Member image five">
              </figure>
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay="1.1s">
            <a href="#team-6" data-team="team-6">
               <figure>
                      <img src="https://dummyimage.com/640x4:3/" alt="Team Member image six">
               </figure>
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay="1.3s">
            <a href="#team-7" data-team="team-7">
               <figure>
                       <img src="https://dummyimage.com/640x4:3/" alt="Team Member image seven">
               </figure>
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay="1.5s">
            <a href="#team-8" data-team="team-8">
               <figure>
                       <img src="https://dummyimage.com/640x4:3/" alt="Team Member image eight">
               </figure>
            </a>
        </li>
     </ul>      
</div>

.team-list > ul > * {
  /* 4 */
  display: block;
  position: absolute;
  margin-top:55%;

}
.team-list > ul > :nth-of-type(1) {
  transform: rotate(0deg) translate(10em) rotate(0deg);
}
.team-list >ul > :nth-of-type(2) {
  transform: rotate(45deg) translate(10em) rotate(-45deg);
}
.team-list > ul > :nth-of-type(3) {
  transform: rotate(90deg) translate(10em) rotate(-90deg);
}
.team-list > ul > :nth-of-type(4) {
  transform: rotate(135deg) translate(10em) rotate(-135deg);
}
.team-list > ul > :nth-of-type(5) {
  transform: rotate(180deg) translate(10em) rotate(-180deg);
}
.team-list > ul > :nth-of-type(6) {
  transform: rotate(225deg) translate(10em) rotate(-225deg);
}
.team-list > ul > :nth-of-type(7) {
  transform: rotate(270deg) translate(10em) rotate(-270deg);
}
.team-list > ul > :nth-of-type(8) {
  transform: rotate(315deg) translate(10em) rotate(-315deg);
}

.team-list img {
  display: block;
  width: 100%;
}

Answer 1

备选案文1

可以这样做的方法之一是，每次用户单击一个项时，都通过“传输”transform属性来实现某种吸引人的效果，但不是很干净的旋转。您可以通过使用getComputedStyle函数来做到这一点，如下所示：

​

let allItems = document.getElementById('list').getElementsByTagName('li');
let allItemsAsArray = Array.from(allItems);

let fixedPositions = {}, transforms = {};
let auxPosition = 0;

allItemsAsArray.forEach((elem, index) => {
  transforms[auxPosition] = window.getComputedStyle(elem).transform;
  fixedPositions[index] = auxPosition++;

  elem.addEventListener('click', (event) => {
    let steps = 8 - fixedPositions[index];
    allItemsAsArray.forEach((elem2, index2) => {
          copyTransformProp(
              transforms[fixedPositions[(index2 + steps) % 8]]
            ,
          elem2);
    });
  });
});

function copyTransformProp(sourceProperty, targetNode) {  
  targetNode.style.setProperty('transform', sourceProperty);
}

.team-list > ul > li {
  /* 4 */
  display: block;
  position: absolute;
  top:55%;
  left: 40%;
  transition: ease all 1s;
}

#list img {
  width: 50px
}

.team-list > ul > :nth-of-type(1) {
  transform: rotate(0deg) translate(10em) rotate(0deg);
}

.team-list >ul > :nth-of-type(2) {
  transform: rotate(45deg) translate(10em) rotate(-45deg);
}

.team-list > ul > :nth-of-type(3) {
  transform: rotate(90deg) translate(10em) rotate(-90deg);
}

.team-list > ul > :nth-of-type(4) {
  transform: rotate(135deg) translate(10em) rotate(-135deg);
}
.team-list > ul > :nth-of-type(5) {
  transform: rotate(180deg) translate(10em) rotate(-180deg);
}
.team-list > ul > :nth-of-type(6) {
  transform: rotate(225deg) translate(10em) rotate(-225deg);
}
.team-list > ul > :nth-of-type(7) {
  transform: rotate(270deg) translate(10em) rotate(-270deg);
}
.team-list > ul > :nth-of-type(8) {
  transform: rotate(315deg) translate(10em) rotate(-315deg);
}

.team-list img {
  display: block;
  width: 20%;
}

<div class="team-list">
    <ul id='list'>
       <li class="wow active zoomIn" data-wow-duration="1s" data-wow-delay=".1s" >
            <a href="#team-1" data-team="team-1">
               
                      <img src="https://dummyimage.com/640x4:3/&text=1" alt="Team Member image One">
               
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay=".3s">
            <a href="#team-2" data-team="team-2">
               
                       <img src="https://dummyimage.com/640x4:3/&text=2" alt="Team Member image two">
               
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay=".5s">
            <a href="#team-3" data-team="team-3">
               
                      <img src="https://dummyimage.com/640x4:3/&text=3" alt="Team Member image three">
              
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay=".7s">
            <a href="#team-4" data-team="team-4">
               
                      <img src="https://dummyimage.com/640x4:3/&text=4" alt="Team Member image four">
               
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay=".9s">
            <a href="#team-5" data-team="team-5">
               
                      <img src="https://dummyimage.com/640x4:3/&text=5" alt="Team Member image five">
              
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay="1.1s">
            <a href="#team-6" data-team="team-6">
               
                      <img src="https://dummyimage.com/640x4:3/&text=6" alt="Team Member image six">
               
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay="1.3s">
            <a href="#team-7" data-team="team-7">
               
                       <img src="https://dummyimage.com/640x4:3/&text=7" alt="Team Member image seven">
               
            </a>
        </li>
        <li class="wow zoomIn" data-wow-duration="1s" data-wow-delay="1.5s">
            <a href="#team-8" data-team="team-8">
               
                       <img src="https://dummyimage.com/640x4:3/&text=8" alt="Team Member image eight">
               
            </a>
        </li>
     </ul>      
</div>

​

选项2

现在，为了实现真正干净的旋转，我将使用请求​动画​帧。这一次，您将不依赖于CSS属性转换的平滑性，而是直接在JavaScript中使用角度。

我认为在JS中动态生成条目可能更好，这样您就不必在CSS中手动地对每个项进行样式设置。它还允许你生成“你想要的多少东西”，但是要小心，不要对数量太贪婪。

试试这一整页的片段。

HIH

​

let ul = document.getElementById('list');
let anglePerItem = [];

generateItems(8, 0, 9);

let allItems = ul.getElementsByTagName('li');
let allItemsAsArray = Array.from(allItems);

function generateItems(itemNum, initAngle, radius) {
    let angleStep = Math.PI * 2 / itemNum;
    let angle = initAngle;

    for (let i = 0; i < itemNum; i++) {
        let li = document.createElement('li');
        if (i === 0)
            li.classList.add('wow', 'active', 'zoomIn');
        else
            li.classList.add('wow', 'zoomIn');

        let a = document.createElement('a');
        a.href = '#team-' + (i + 1);
        a.setAttribute('data-team', 'team-' + (i + 1));
        li.appendChild(a);

        let img = document.createElement('img');
        img.src = 'https://dummyimage.com/640x4:3/&text=' + (i + 1);
        img.alt = 'Team Member image ' + (i + 1);
        a.appendChild(img);

        let x = Math.cos(angle) * radius, y = Math.sin(angle) * radius;
        anglePerItem.push(angle);
        angle += angleStep;
        li.style.transform = 'translate(' + x + 'em, ' + y + 'em)';

        ul.appendChild(li);

        addClickEvent(li, i, radius);
    }
}

function addClickEvent(elem, clickedIndex, radius) {
    elem.addEventListener('click', () => {
        if (anglePerItem[clickedIndex] !== 0) {
            Array.from(ul.getElementsByTagName('li')).forEach((elem, index) => {
                let angle = anglePerItem[index] % (Math.PI * 2);
                let endAngle = Math.PI * 2 - anglePerItem[clickedIndex] + angle;
                if (angle > endAngle)
                    endAngle += Math.PI * 2;

                function step(timestamp) {
                    let x = Math.cos(angle) * radius, y = Math.sin(angle) * radius;
                    angle += .1;

                    elem.style.transform = 'translate(' + x + 'em, ' + y + 'em)';

                    if (angle < endAngle) {
                        setTimeout(function () {
                            window.requestAnimationFrame(step);
                        }, 10);
                    } else {
                        elem.style.transform = 'translate(' + Math.cos(endAngle) * radius + 'em, ' + Math.sin(endAngle) * radius + 'em)';
                        anglePerItem[index] = endAngle;
                    }
                }

                window.requestAnimationFrame(step);
            });
        }
    });
}

.team-list > ul > li {
    display: block;
    position: absolute;
    top:50%;
    left: 40%;
}

#list img {
    width: 50px
}

.team-list img {
    display: block;
    width: 20%;
}

<div class="team-list"><ul id='list'></ul></div>

​