javascript - 循环队列方式的 HTML 列表？

标签 javascript jquery html css jquery-plugins

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

最佳答案

您可以使用以下示例之一实现您的要求: Codepen example url enter image description here 

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 列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18484887/

上一篇：javascript - 文本溢出省略号在 Windows (IE 10) 中不起作用

下一篇：javascript - Jquery 单击仅在切换时工作一次

相关文章：

javascript - Jquery .html() 函数返回不符合嵌套顺序的 html

javascript - php脚本邮件程序模式 Bootstrap

javascript - 如何使用 JavaScript 将 html 页面内容保存在 .txt 文件中？

PHP strip 标签不工作

javascript - 如何在 JavaScript 中创建对象集合并在另一个对象中赋值？

javascript - 如何使用javascript从头部删除链接标签？

javascript - 在 JavaScript 中将对象放入数组中

php - 错误异常 : Array to string conversion in PHP

iframe 中的 Javascript 警报框

javascript - 如何链接我的方法调用？

©2024 IT工具网  联系我们