html 文字滚动

### 实现 HTML 中的文字滚动效果 文字滚动效果在网页设计中非常常见，可以通过 CSS 和 JavaScript 的结合实现。以下是几种常见的文字滚动方式及其代码示例。 #### 1. 文字水平滚动 文字水平滚动可以通过不断改变 `transform` 属性的 `translateX` 值来实现[^1]。以下是一个完整的实现： ```javascript var translateX = 0; var scrollLenth = 500; // 总滚动长度 var basicInterval = setInterval(function () { translateX++; if (translateX === scrollLenth) { translateX = 0; } $('.basicInfoWrapper.scroll-text').css({ 'transform': 'translateX(-' + translateX + 'px)' }); }, 20); // 鼠标悬停时停止滚动 $('.basicInfoWrapper.scroll-wrapper').mouseenter(function () { clearInterval(basicInterval); }); // 鼠标移出后继续滚动 $('.basicInfoWrapper.scroll-wrapper').mouseleave(function () { basicInterval = setInterval(function () { translateX++; if (translateX === scrollLenth) { translateX = 0; } $('.basicInfoWrapper.scroll-text').css({ 'transform': 'translateX(-' + translateX + 'px)' }); }, 20); }); ``` 此代码通过定时器不断更新 `translateX` 值，从而实现文字的水平滚动效果[^1]。 #### 2. 文字垂直滚动 文字垂直滚动与水平滚动类似，只需将 `translateX` 替换为 `translateY` 即可[^2]。以下是一个简单的垂直滚动实现： ```javascript var translateY = 0; var scrollHeight = 300; // 总滚动高度 var verticalInterval = setInterval(function () { translateY++; if (translateY === scrollHeight) { translateY = 0; } $('.vertical-scroll-text').css({ 'transform': 'translateY(-' + translateY + 'px)' }); }, 20); // 鼠标悬停时停止滚动 $('.vertical-scroll-wrapper').mouseenter(function () { clearInterval(verticalInterval); }); // 鼠标移出后继续滚动 $('.vertical-scroll-wrapper').mouseleave(function () { verticalInterval = setInterval(function () { translateY++; if (translateY === scrollHeight) { translateY = 0; } $('.vertical-scroll-text').css({ 'transform': 'translateY(-' + translateY + 'px)' }); }, 20); }); ``` 这段代码实现了文字由下往上的匀速滚动效果，并且当鼠标悬停时停止滚动，移出后继续滚动[^2]。 #### 3. 使用 CSS 动画实现文字滚动 除了使用 JavaScript，还可以通过纯 CSS 实现文字滚动效果。以下是一个基于 CSS 动画的水平滚动示例： ```css @keyframes scrollText { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } .scroll-text { white-space: nowrap; overflow: hidden; animation: scrollText 5s linear infinite; } .scroll-text:hover { animation-play-state: paused; } ``` 此方法利用了 CSS 的 `@keyframes` 定义动画帧，并通过 `animation` 属性应用到目标元素上。当用户将鼠标悬停在文字上时，动画会暂停。 --- ###