Question

<div id="wrap">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

$(document).ready(function() {
  function scroll() {
    $('#wrap ul li:first').slideUp(function() {
      $(this).show().parent().append(this);
    });
  }
  setInterval(scroll, 1000);
});

这基本上就是我想要的动作，但是我还希望在执行slideUp时向顶部项添加淡出，并且随着向上移动到顶部位置，以下项的字体大小逐渐增大。我一直无法弄清楚是怎么回事。

Answer 1

根据您的问题，我了解您希望逐渐增加font-size。

使用 siblings()

$('#wrap ul li:first').slideUp(function() {
      //Append item
      $(this).show().parent().append(this);
      //Change css for first item.
      $('#wrap ul li:eq(0)')
        .css('font-size', '42px')
        .siblings()      // siblings will give others
        .css('font-size', '36px');
});

$(document).ready(function() {
  function scroll() {
    $('#wrap ul li:first').slideUp(function() {
      $(this).show().parent().append(this);
      $('#wrap ul li:eq(0)')
           .css('font-size', '42px')
           .siblings()
           .css('font-size', '36px');
    });
  }
  setInterval(scroll, 1000);
});

li{
 font-size: 36px  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

Answer 2

我知道我有点晚了，但你也可以尝试这个

＆＃13;

$(document).ready(function() {
  var size = ['40px', '30px', '20px', '10px']

  function scroll() {
    renderSize();
    $('#wrap ul li:first').fadeOut('slow', function() {
      $(this).slideUp(function() {
        $(this).show().parent().append(this);
        renderSize()
      });
    })
  }

  function renderSize() {
    $('#wrap ul li').each(function(i) {
      $(this).css('font-size', size[i])
    })
  }
  
  renderSize()
  setInterval(scroll, 1000);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

＆＃13;

如果你这样做，你会得到一个更加讽刺的卷轴

＆＃13;

    var size = [40, 30, 20, 10]

    function renderSize() {
      $('#wrap ul li').each(function(i) {
        $(this).css('font-size', size[i])
      })
    }

    function scroll() {
      $('#wrap ul li:first').animate({
        fontSize: "0"
      }, 500, function() {
        $(this).show().parent().append(this);
      }).animate({
        fontSize: size[3] + "px"
      }, 500)

      $('#wrap ul li').each(function(i) {
        i++;
        reSize(i);
      })
    }

    function reSize(i) {
      i++;
      var j = i - 2;
      $('#wrap ul li:nth-child(' + i + ')').animate({
        fontSize: size[j] + "px",
      }, 500)
    }

    $(document).ready(function() {
      renderSize()
      setInterval(scroll, 1000);
    })

＆＃13;

ul {
  height: 110px;
  overflow: hidden;
  list-style-type: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

＆＃13;

Answer 3

如何使顶部项目也像其他部分一样向上滑动，而不是固定在背景中以使幻灯片看起来更加无缝？

非常像这样： http://buildinternet.com/project/totem/ 除了setInterval调用，而不是点击下一个

JQuery - 滚动列表，逐渐增加字体大小

3 个答案: