jquery 跑马灯效果

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

以下是一个使用jQuery实现的简单跑马灯效果的示例代码：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯效果</title>
<style>
  .marquee {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
  }
  .marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 10s linear infinite;
  }
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
</style>
</head>
<body>
 
<div class="marquee">
  <span class="marquee-text">这是一个简单的跑马灯效果 - 欢迎访问！</span>
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // jQuery 代码写在这里
</script>
 
</body>
</html>

这段代码中，我们使用了CSS3的@keyframes动画来实现文字的滚动效果，并通过jQuery来控制和扩展其功能（如果有必要的话）。这是一个简洁而高效的跑马灯实现方式。

jquery 跑马灯效果

评论已关闭

推荐阅读