JS特效第103弹：jQuery动态的文字跳动代码

作者：System 时间：2024年08月15日分类：所有,jquery 字数：1028

以下是一个使用jQuery实现的动态文字跳动效果的简单示例：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态跳动文字</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<h1 id="jumpingText">欢迎来到我的世界</h1>
 
<script src="jumpingTextEffect.js"></script>
</body>
</html>

JavaScript部分 (jumpingTextEffect.js)：




$(document).ready(function() {
  function shakeText(element, times, distance, duration) {
    for (let i = 0; i < times; i++) {
      $(element)
        .animate({ marginLeft: distance }, duration)
        .animate({ marginLeft: 0 }, duration);
    }
  }
 
  setInterval(() => {
    const text = $("#jumpingText").text();
    const randomChar = String.fromCharCode(65 + Math.random() * 26);
    $("#jumpingText").text(randomChar + text.slice(1));
    shakeText("#jumpingText", 3, 5, 100);
  }, 2000);
});

这段代码定义了一个shakeText函数，用于处理文字的抖动效果。在$(document).ready中，我们设置了一个定时器，它每2秒执行一次，随机选取一个字符并将其加到文本的开头，然后调用shakeText函数来模拟抖动效果。

JS特效第103弹：jQuery动态的文字跳动代码

评论已关闭

推荐阅读