Question

我有一个可滚动的项目列表，当最后一项滚动到顶部时我希望第一项跟随下一个索引以及相关索引上的所有剩余项目，是否有任何想法使用jquery实现它？

Answer 1

您可以使用以下示例之一来实现您的要求： Codepen example url

const srart_pos = 90.75;
const item_count = 13;
const s = 0.52 * Math.PI / 180; //Вычислим угол смещения

var pos = [];
var elem = document.getElementsByClassName('item');
 

function allocationItems() {
  var i;
  var pp = elem[6].getElementsByTagName('a')[0].getAttribute('data-img'); 
  document.getElementById("pic").style.backgroundImage = "url('"+pp+"')"; 
  document.getElementById("pic").className = "img-box";
  pos[0] = srart_pos;
  for (i = 1; i < item_count; i++) {
    pos[i] = pos[i - 1] - 0.2;
    last_pos=pos[i];
  }
  for (i = 0; i < item_count+1; i++) {
    elem[i].style.left = 240 + 250 * Math.sin(pos[i]) + 'px';
    elem[i].style.top = 240 + 250 * Math.cos(pos[i]) + 'px';
  }
}  

allocationItems();

function animation(args, flag) { // некоторые аргументы определим на будущее
    var $ = {
        radius: 250, // радиус окружности 
        speed: 10 // скорость/задержка ( в js это мс, например 10 мс = 100 кадров в секунду)
    };
    var e = elem;
    document.getElementById("pic").className = "hide";    
    function animate(draw, duration, callback) {
        var start = performance.now();
        requestAnimationFrame(function animate(time) {
            // определить, сколько прошло времени с начала анимации
            var timePassed = time - start;
            console.log(time, start)
            // возможно небольшое превышение времени, в этом случае зафиксировать конец
            if (timePassed > duration)
                timePassed = duration;
            // нарисовать состояние анимации в момент timePassed
            draw(timePassed);
            // если время анимации не закончилось - запланировать ещё кадр
            if (timePassed < duration) {
                requestAnimationFrame(animate);
            } else callback();
        });
    }
    animate(function (timePassed) {
        var i;
        for (i = 0; i < item_count; i++) {
            e[i].style.left = 240 + $.radius * Math.sin(pos[i]) + 'px';
            e[i].style.top = 240 + $.radius * Math.cos(pos[i]) + 'px';
            if (flag) {
                pos[i] += s; 
            } else {
                pos[i] -= s; 
            }
        }   /* callback function */
    }, 400, function changeItems() {
        var list = document.getElementById('list');
        var ch = flag ? list.firstElementChild : list.lastElementChild
        ch.remove();
        if (flag) {
          list.appendChild(ch);
        } else {
          list.insertBefore(ch, list.firstChild);
        }
        allocationItems();
    });
}

$border-color: #a2c0d9;
$background-color: #4682b4;
$font-color: #dae6ef;
$hover-color: white;

body {
  background-color: $background-color;
}

a:hover,
a {
  color: inherit;
  text-decoration: inherit;
}

.c-menu {
  position: relative;
  height: 440px;
  width: 800px;
  overflow: hidden;
  margin-left: 50px;
  margin-top: 50px;
}

%gradient-box {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50px;
  background: transparent;
}

.top {
  @extend %gradient-box;
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(70, 130, 180, 1) 0%,
    rgba(70, 130, 180, 0) 100%
  );
}

.bottom {
  @extend %gradient-box;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(70, 130, 180, 0) 0%,
    rgba(70, 130, 180, 1) 100%
  );
}

.img-box {
  position: absolute;
  left: 7px;
  top: 177px;
  width: 111px;
  height: 82px;
  opacity: 1;
  transition: opacity, 2s;
 }

.hide {
  @extend .img-box;
  opacity: 0;
  transition: opacity, .5s;
}

.items-list {
  position: absolute;
  left: -400px;
  top: -101px;
  width: 500px;
  height: 498px;
  border: 2px solid $border-color;
  border-radius: 50%;
  margin: 70px;
}

.item {
  position: absolute;
  width: 600px;
  padding-left: 25px;
  font-size: 18px;
  transition: font-size 1s;
  text-align: left;
  cursor: pointer;
  &:nth-child(7) {
    font-size: 28px;
    margin-top: -4px;
    transition: font-size .5s;
  }
  &:before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: $font-color;
    border-radius: 50%;
    left: 5px;
    top: 4px;
  }
  &:nth-child(7):before{
    top: 10px;
    //box-shadow: 0 0 0 2px yellow, 
    //            0 0 0 4px deeppink,      
    //            0 0 0 6px darkorange,
    //            0 0 0 8px #8014ff;
  }
  a {
    color: $font-color;
    transition: color 0.5s;
    &:hover {
      color: $hover-color;
      transition: color 0.5s ;
    }
  }
  &:nth-child(2),
  &:nth-child(3),
  &:nth-child(11),
  &:nth-child(12) {
    opacity: 0.7;
  }
}

.btn {
  position: absolute;
  width: 20px;
  height: 20px;
  cursor: pointer;
  left: 60px;
  font-size: 20pt;
  color: $font-color;
  transform: scale(3, 1);
  user-select: none;
  &:hover {
    color: $hover-color;
    transition: color 0.5s;
  }
}

.prev {
  top: 110px;
}

.next {
  bottom: 120px;
}

<div class="container">
  <div class="c-menu">
    <div id="list" class="items-list">
      <div class="item">
        <a href="https://sass-scss.ru" data-img="https://eu1.searchpreview.de/preview?s=https://sass-scss.ru&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
               Sass: Документация на русском языке
            </a>
      </div>
      <div class="item">
        <a href="http://www.color-hex.com/" data-img="https://eu1.searchpreview.de/preview?s=http://www.color-hex.com&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
               Color Hex Color Codes
            </a>
      </div>
      <div class="item">
        <a href="https://webref.ru/" data-img="https://eu1.searchpreview.de/preview?s=https://webref.ru&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
               WebReference
            </a>
      </div>
      <div class="item">
        <a href="https://www.w3schools.com/" data-img="https://eu1.searchpreview.de/preview?s=https://www.w3schools.com&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
               W3Schools Online Web Tutorials
            </a>
      </div>
      <div class="item">
        <a href="https://learn.javascript.ru/" data-img="https://eu1.searchpreview.de/preview?s=https://learn.javascript.ru&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
               Современный учебник Javascript
            </a>
      </div>
      <div class="item">
        <a href="https://caniuse.com" data-img="https://eu1.searchpreview.de/preview?s=https://caniuse.com&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
              Can I use... Support tables for HTML5, CSS3, etc
            </a>
      </div>
      <div class="item">
        <a href="https://css-tricks.com/" data-img="https://eu1.searchpreview.de/preview?s=https://css-tricks.com&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
               CSS-Tricks
            </a>
      </div>
      <div class="item">
        <a href="https://codepen.io" data-img="https://eu1.searchpreview.de/preview?s=https://codepen.io&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
               CodePen
            </a>
      </div>
      <div class="item">
        <a href="https://unicode-table.com" data-img="https://eu1.searchpreview.de/preview?s=https://unicode-table.com&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
               Таблица символов Юникода®
            </a>
      </div>
      <div class="item">
        <a ref="https://fontawesome.com/" data-img="https://eu1.searchpreview.de/preview?s=https://fontawesome.com&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
               Font Awesome
            </a>
      </div>
      <div class="item">
        <a href="https://ru.vuejs.org/index.html" data-img="https://eu1.searchpreview.de/preview?s=https://vuejs.org&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
               Vue.js
            </a>
      </div>
      <div class="item">
        <a href="http://php.net/manual/ru/intro-whatis.php" data-img="https://eu1.searchpreview.de/preview?s=http://php.net&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
               PHP: Что такое PHP? - Manual
            </a>
      </div>
      <div class="item">
        <a href="http://www.sql.ru/" data-img="https://eu1.searchpreview.de/preview?s=http://www.sql.ru&ua=Firefox&ver=1003&opts=111" target="_blank" rel="noopener">
               SQL.ru - все про SQL
            </a>
      </div>
    </div>
    <div class="top"></div>
    <div class="btn prev" onClick="animation({}, 1);">˄</div>
    <div id="pic" class="img-box"></div>
    <div class="btn next" onClick="animation({}, 0);">˅</div>
    <div class="bottom"></div>
  </div>
</div>

这是仅使用javascript的索引，并且所有元素都沿盘旋方向移动。

循环队列时尚的HTML列表？

1 个答案: