javascript - div 的幻灯片放映并更新任何 div 的字体大小

Question

我有一个 div 幻灯片。我想更改字体大小，以便文本 div 保留在 div #column2 内。 (PS#column2在CSS中具有固定高度)

下面的脚本只检查第一个 li ，而不检查其他的。我怎样才能改变它，以便它检查每个里的条件。谢谢!

HTML

<div class="slide">
  <li>
    <div id="container">
      <div id="column1">
        <img src="img1.jpg" />
      </div>

      <div id="column2">
        <div>
          <span class="comment">Short text</span>
          <span class="name">MyName</span>
        </div>
      </div>

    </div>

  </li>

  <li>
    <div id="container">
      <div id="column1">
        <img src="img1.jpg" />
      </div>

      <div id="column2">
        <div>
          <span class="comment">Long text</span>
          <span class="name">MyName</span>
        </div>
      </div>
    </div>
   </li>
   <li>
    <div id="container">
      <div id="column1">
        <img src="img1.jpg" />
      </div>

      <div id="column2">
        <div>
          <span class="comment">Very Long text</span>
          <span class="name">MyName</span>
        </div>
      </div>
    </div>
  </li>
</div>

JavaScript

<script>

    $(function() {

            //adjust font
              while( $('.slide #column2 div').height() > $('.slide #column2').height() ) {//check condition
                  $('.slide #column2').css('font-size', (parseInt($('.slide #column2').css('font-size')) - 1) + "px" );//change fot size
              }


         //slideshow
            $('.slide li').hide(); // hide all slides
                  $('.slide li:first-child').show(); // show first slide
                  setInterval(function () {
                        $('.slide li:first-child').fadeOut(500, function () {
                              $(this).next('li').fadeIn(1000).end().appendTo('.slide') });            
                  }, 5000); // slide duration               
      });    
</script> 

Answer 1

我添加了一些逻辑，每次 setInterval 函数运行时都会执行该逻辑。该逻辑将检索注释并检查注释的长度。如果长度大于12 字体大小减小。显然，您可以将此值更改为您需要的任何值:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {

        $('.slide li').hide();
        $('.slide li:first-child').show();

        setInterval(function () {
            $('.slide li:first-child').fadeOut(500, function () {

                var nextLi = $(this).next('li');
                var comment = $(nextLi).find(".comment");

                var commentLength = $(comment).text().length;

                if (commentLength > 12) {
                    alert('The coming comment is more than 12 characters long -> reduce font size');
                    $(comment).css('font-size', '6px');
                }

                $(this).next('li').fadeIn(1000).end().appendTo('.slide')

            });
        }, 5000); // slide duration               
    });
</script>

只是一个想法:

如果评论大于 X，您可以使用 substring 来缩短评论，并将工具提示(当用户将鼠标悬停在评论上时)设置为完整长度的评论。这样您就不会冒着使评论字体太小而导致用户无法真正阅读的风险。

只需替换这一行:

$(comment).css('font-size', '6px');

这样:

var text = $(comment).text().substring(0, 9);
text = text + "...";
$(comment).attr('title', $(comment).text());
$(comment).text(text);