你有没有想过对文本应用“故障”效果？

本文将向您展示如何使用jQuery脚本通过逐个字符随机打乱字母来显示文本。这有助于创建引人注目的文本显示效果，有点像机场航站楼。让我们开始吧。

如何使用它:

1.创建一组包含文本初始值的内联元素。

<div class="example">
  <span class="nbr ltr">0</span>
  <span class="nbr ltr">0</span>
  <span class="nbr ltr">0</span>
  <span class="nbr ltr">0</span>
  <span class="nbr ltr">0</span>
  <span class="nbr ltr">0</span>
</div>

2.在文档末尾加载所需的jQuery库。

<script src="/path/to/cdn/jquery.slim.min.js"></script>

3.文本混洗效果的主要脚本。别忘了用你自己的替换文本。

$(document).ready(function() {
 
  let $randomnbr = $('.nbr'),
    $timer = 30,
    $it,
    $change,
    $index,
    $data = 0,
    $letters = ['j', 'Q', 'u', 'e', 'r', 'y'];
 
  $randomnbr.each(function() {
 
    $change = Math.round(Math.random() * 100);
    $(this).attr('data-change', $change)
 
  });
 
  function random() {
    return Math.round(Math.random() * 9);
  }
 
  function select() {
    return Math.round(Math.random() * $randomnbr.length + 1);
  }
 
  function value() {
    $('.nbr:nth-child(' + select() + ')').html('' + random() + '');
    $('.nbr:nth-child(' + select() + ')').attr('data-number', $data);
    $data++;
 
    $randomnbr.each(function() {
 
      if (parseInt($(this).attr('data-number')) > parseInt($(this).attr('data-change'))) {
        $index = $('.ltr').index(this);
        $(this).html($letters[$index]);
        $(this).removeClass('nbr');
      }
    });
 
  }
 
  it = setInterval(value, $timer);
 
})

预览截图

jQuery通过随机排列字符来显示文本