【前端技术】除了纯 CSS，还有哪些方法可以实现横向跑马灯效果

文章摘要

使用 JavaScript 可以对 DOM 元素进行更灵活的操作。通过获取跑马灯容器和内容元素，利用定时器(setInterval或setTimeout)来定时改变内容元素的位置属性(如left或translateX)，从而实现滚动效果。

核心要点

一、JavaScript 实现

　　基本原理

　　使用 JavaScript 可以对 DOM 元素进行更灵活的操作。通过获取跑马灯容器和内容元素，利用定时器(setInterval或setTimeout)来定时改变内容元素的位置属性(如left或translateX)，从而实现滚动效果。

　　示例代码

　　假设 HTML 结构如下：

　　html

　　

这是一段通过JavaScript实现滚动的文本。

　　对应的 JavaScript 代码可以是：

　　javascript

　　const marqueeContainer = document.querySelector('.marquee-container-js');

　　const marqueeContent = document.querySelector('.marquee-content-js');

　　let position = 0;

　　const speed = 1; // 调整滚动速度

　　function moveMarquee() {

　　position--;

　　marqueeContent.style.left = position + 'px';

　　if (position <= -marqueeContent.offsetWidth) {

　　position = marqueeContainer.offsetWidth;

　　}

　　}

　　const intervalId = setInterval(moveMarquee, 1000 / 60); // 每秒60帧的近似帧率

　　这段代码首先获取了容器和内容元素，然后定义了一个变量position来表示内容元素的left位置。在moveMarquee函数中，position的值不断减小，使内容向左移动。当内容完全移出容器(position <= -marqueeContent.offsetWidth)时，将position重置为容器的宽度，实现循环滚动。最后，使用setInterval来定时调用moveMarquee函数，实现动态滚动效果。

　　优势与劣势

　　优势：

　　高度灵活，可以实现复杂的动画逻辑，如根据用户交互(如点击、滚动等)动态改变滚动速度、方向或暂停 / 恢复滚动。

　　能够方便地与其他 JavaScript 库或框架集成，适用于大型、复杂的项目。

　　劣势：

　　需要编写更多的代码，对于简单的跑马灯效果可能会增加不必要的复杂性。

　　如果处理不当，可能会导致性能问题，特别是在频繁操作 DOM 元素或在低性能设备上运行时。

　　二、使用 JavaScript 库(如 jQuery)

　　基本原理

　　jQuery 是一个流行的 JavaScript 库，它提供了简洁的语法来操作 DOM 元素和实现动画效果。对于跑马灯效果，可以使用animate函数来改变元素的位置，实现平滑的滚动。

　　示例代码

　　假设 HTML 结构与上面相同，使用 jQuery 实现的代码如下：

　　html

　　

这是一段通过jQuery实现滚动的文本。

　　javascript

　　￥(document).ready(function() {

　　const marqueeContainer = ￥('.marquee-container-jquery');

　　const marqueeContent = ￥('.marquee-content-jquery');

　　let position = 0;

　　const speed = 1;

　　function moveMarquee() {

　　position--;

　　marqueeContent.css('left', position);

　　if (position <= -marqueeContent.outerWidth()) {

　　position = marqueeContainer.outerWidth();

　　}

　　}

　　setInterval(moveMarquee, 1000 / 60);

　　});

　　这里，￥(document).ready函数确保在文档加载完成后执行代码。然后，通过 jQuery 选择器获取容器和内容元素，同样使用position变量来控制滚动位置。moveMarquee函数中使用css方法来改变left属性，实现滚动。循环滚动的逻辑与纯 JavaScript 实现类似，最后使用setInterval来定时调用moveMarquee函数。

　　优势与劣势

　　优势：

　　语法简洁，对于熟悉 jQuery 的开发者来说，代码编写速度更快。

　　提供了跨浏览器兼容性的解决方案，减少了因浏览器差异而导致的问题。

　　劣势：

　　需要引入额外的库，增加了页面的加载时间和资源占用。

　　在现代 JavaScript 框架(如 React、Vue 等)流行的环境下，可能会与这些框架的开发模式产生冲突或冗余。

　　三、使用 CSS 预处理器(如 Sass、Less)

　　基本原理

　　CSS 预处理器允许开发者使用变量、函数、嵌套规则等高级特性来编写更高效、可维护的 CSS 代码。对于跑马灯效果，可以利用这些特性来更好地组织动画相关的代码，例如通过变量来控制动画的速度、持续时间等参数。

　　示例代码(以 Sass 为例)

　　假设 HTML 结构如下：

　　html

　　

这是一段通过Sass实现滚动的文本。

　　对应的 Sass 代码(编译后会生成 CSS 代码)：

　　scss

　　￥speed: 10s; // 动画持续时间

　　.marquee-container-sass {

　　width: 100%;

　　height: 50px;

　　overflow: hidden;

　　position: relative;

　　}

　　.marquee-content-sass {

　　white-space: nowrap;

　　position: absolute;

　　left: 0;

　　top: 0;

　　display: flex;

　　align-items: center;

　　animation: marquee ￥speed linear infinite;

　　}

　　@keyframes marquee {

　　0% {

　　left: 0;

　　}

　　100% {

　　left: -100%;

　　}

　　}

　　这段 Sass 代码定义了一个变量￥speed来控制动画的持续时间。然后，在.marquee-container-sass和.marquee-content-sass类中设置容器和内容的样式，与纯 CSS 实现类似。动画的持续时间通过变量￥speed来指定，这样如果需要调整动画速度，只需要修改变量的值即可。

　　优势与劣势

　　优势：

　　提高了 CSS 代码的可维护性，通过变量和函数等特性可以更方便地修改和扩展样式。

　　支持代码的模块化和复用，例如可以将动画相关的代码提取到一个单独的文件中，在多个项目或组件中使用。

　　劣势：

　　需要学习和使用预处理器的语法，对于初学者来说可能有一定的学习成本。

　　增加了开发流程的复杂性，因为需要将预处理器代码编译为 CSS 代码后才能在浏览器中使用。