jquery单行文字向上滚动效果示例


<!DOCTYPE html>
<html>
<head>
<title>单行文字向上滚动效果</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  #scrollText {
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 20px; /* 根据需要调整高度 */
    line-height: 20px; /* 与高度相同，保证单行显示 */
  }
  #scrollText p {
    position: absolute;
    animation: scroll 10s linear infinite; /* 滚动速度和时间可调整 */
  }
  @keyframes scroll {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
  }
</style>
</head>
<body>

<div id="scrollText">
  <p>这里是需要滚动的文字，可以根据需要设置长度...</p>
</div>

<script>
$(document).ready(function(){
  // 可以在这里添加额外的jQuery代码，但此示例不需要
});
</script>

</body>
</html>

这是一个使用纯CSS和HTML（通过jQuery引入）实现的单行文字向上滚动效果的示例。这里通过CSS的`@keyframes`定义了一个名为`scroll`的动画，它使文本从右向左滚动。文本被包裹在一个`div`元素中，该`div`元素设置了`overflow: hidden;`来隐藏超出容器的部分。文本本身被设置为绝对定位，并应用了这个动画。注意，动画的方向和速度可以通过调整`@keyframes`中的`transform`属性以及`animation`属性的`duration`值来改变。