javascript - 循環キュー方式の HTML リスト?

Question

私はアイテムのスクロール可能なリストを持っています.最後のアイテムが一番上にスクロールされると、最初のアイテムが相対インデックスの残りのすべてのアイテムとともに次のインデックスに続きます.jqueryを使用して実装するアイデアはありますか?

score 0 · Accepted Answer

以下の例のいずれかを使用して要件を実装できます: Codepen の例の 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のみを使用するためのインデックスであり、すべての要素がサーキュラー方向に移動します。

javascript - 循環キュー方式の HTML リスト?

1 に答える 1

Related

Reference