marquee js模拟

<marquee> 标签是 HTML 中的一个非标准标签，用于创建滚动文本效果。然而，由于它不是 W3C 标准的一部分，并且在现代浏览器中的支持逐渐减少，因此不推荐使用。取而代之的是，可以使用 JavaScript 和 CSS 来实现类似的效果。

基础概念

• HTML <marquee> 标签：一个过时的标签，用于创建文本或图像的滚动效果。
• JavaScript 模拟：使用 JavaScript 动态改变元素的位置，从而实现滚动效果。

优势

• 兼容性：使用 JavaScript 和 CSS 可以确保更好的跨浏览器兼容性。
• 灵活性：可以通过脚本精确控制滚动的速度、方向和其他属性。
• 可访问性：现代方法更注重可访问性，确保内容对所有用户都是可访问的。

类型

• 水平滚动：文本或图像沿水平方向移动。
• 垂直滚动：文本或图像沿垂直方向移动。
• 循环滚动：内容在到达边界后返回起点，形成无限循环。

应用场景

• 新闻滚动条：在网站顶部显示最新新闻。
• 广告横幅：在页面侧边或底部展示滚动广告。
• 通知提示：在用户界面上显示重要通知或消息。

示例代码（JavaScript + CSS）

以下是一个简单的例子，展示了如何使用 JavaScript 和 CSS 来模拟 <marquee> 的效果：

HTML

<div id="marquee-container">
  <span id="marquee-text">这是一个滚动的文本示例。</span>
</div>

CSS

#marquee-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

#marquee-text {
  white-space: nowrap;
  position: absolute;
}

JavaScript

const marqueeText = document.getElementById('marquee-text');
let position = 100; // 初始位置

function scrollText() {
  if (position < -marqueeText.clientWidth) {
    position = 100; // 重置位置以实现循环滚动
  }
  marqueeText.style.left = position + 'px';
  position--;
  requestAnimationFrame(scrollText);
}

scrollText(); // 开始滚动

遇到的问题及解决方法

问题1：滚动不流畅

原因：可能是由于 JavaScript 执行频率过高或者浏览器渲染性能不足。

解决方法：使用 requestAnimationFrame 来优化动画性能，确保在每一帧中只执行一次滚动操作。

问题2：文本在某些设备上显示不正确

原因：可能是由于不同设备的屏幕尺寸和分辨率差异导致的布局问题。

解决方法：使用响应式设计原则，确保容器和文本的大小能够适应不同的屏幕尺寸。

问题3：无法实现无缝循环滚动

原因：可能是由于文本长度和容器长度不匹配，导致滚动结束后出现空白。

解决方法：可以通过复制文本并拼接在其后面，使得当原始文本滚动出视线后，复制的文本紧接着出现，从而实现无缝循环。

通过上述方法，可以有效地使用现代 Web 技术来模拟传统的 <marquee> 效果，同时避免了过时标签带来的兼容性和可访问性问题。