移动端长文本如何实现自动轮播？-html教程-PHP中文网

移动端长文本如何实现自动轮播？

霞舞

发布： 2025-02-20 19:38:11

原创

993人浏览过

移动端文字长自动轮播

当你需要在移动端显示长文本时，如何自动对其进行轮播以确保可读性至关重要。以下是一种可行的实现方式：

实现原理

响应式在线教育培训类网站模板(响应式)1.4.2

响应式在线教育培训类网站模板(响应式)安装即用，自带人人站CMS内核，支持移动端，前端banner轮播图文本均已进行可视化配置，伪静态页面生成，支持内容模型，支持多种URL模式及模型。模板特点：1、安装即用，自带人人站CMS内核及企业站展示功能（产品，新闻，案例展示等），并可根据需要增加表单搜索等功能（自带模板） 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生

查看详情

利用 CSS 逐字动画：将文本放入一个限制宽度的元素，并在文本上应用逐字轮播动画。如果文本太短而无法滚动，则不会触发动画。
使用 JavaScript: 监听文本的宽度变化。如果宽度大于元素的宽度，则启动动画；否则，停止动画。

示例代码

<div class="text-container">
  <p>很长的文本，当它超过容器宽度时会自动滚动。</p>
</div>

<style>
.text-container {
  width: 200px;
  overflow: hidden;
  animation: text-scroll 5s infinite;
}

.text-scroll {
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.1, 0.8, 0.2, 1);
}
</style>

<script>
const container = document.querySelector('.text-container');
const text = container.querySelector('p');

function startAnimation() {
  if (text.scrollWidth > container.clientWidth) {
    container.classList.add('text-scroll');
  }
}

function stopAnimation() {
  container.classList.remove('text-scroll');
}

text.addEventListener('DOMSubtreeModified', function() {
  startAnimation();
});

window.addEventListener('resize', function() {
  startAnimation();
});
</script>

登录后复制

以上就是移动端长文本如何实现自动轮播？的详细内容，更多请关注php中文网其它相关文章！