ax-marquee

# Marquee Plugin 纯JavaScript跑马灯插件

## English

### Introduction

Marquee is a pure JavaScript gapless marquee scroller supporting four directions (left, right, up, down) with infinite loop and pause on hover functionality. It automatically disables scrolling if the content size does not exceed the container size.

### Features

- Supports horizontal and vertical scrolling
- Directions: left, right, up, down
- Infinite seamless loop without gaps
- Pause on mouse hover or touch
- Automatically disables if scrolling is not necessary

### Usage

1. Include the required HTML structure:

```html
<div class="marquee">
  <div class="marquee__track">
    <div class="marquee__item">Item 1</div>
    <div class="marquee__item">Item 2</div>
    <div class="marquee__item">Item 3</div>
  </div>
</div>

• Instantiate the Marquee:

const marquee = new Marquee('.marquee', {
  direction: 'left',  // 'left' | 'right' | 'up' | 'down'
  speed: 60,          // speed in pixels per second
  pauseOnHover: true  // pause when hovered or touched
});

API

• pause() - pause scrolling
• resume() - resume scrolling

Requirements

• Pure JavaScript, no dependencies
• Modern browsers supporting requestAnimationFrame and CSS transforms

中文

简介

Marquee 是一个纯JavaScript无缝跑马灯插件，支持四个方向（左、右、上、下）无限循环滚动，并支持鼠标悬停暂停功能。当内容尺寸未超出容器时，自动禁用滚动。

功能

• 支持水平和垂直滚动
• 方向：左、右、上、下
• 无限无缝循环，无间隙
• 鼠标悬停或触摸暂停滚动
• 自动判断内容尺寸，决定是否启用滚动

使用方法

• 准备HTML结构：

<div class="marquee">
  <div class="marquee__track">
    <div class="marquee__item">项目 1</div>
    <div class="marquee__item">项目 2</div>
    <div class="marquee__item">项目 3</div>
  </div>
</div>

• 实例化Marquee：

const marquee = new Marquee('.marquee', {
  direction: 'left',   // 'left' | 'right' | 'up' | 'down'
  speed: 60,           // 滚动速度，单位：像素每秒
  pauseOnHover: true   // 鼠标悬停或触摸时暂停滚动
});

API接口

• pause() - 暂停滚动
• resume() - 恢复滚动

依赖要求

• 纯JavaScript，无任何依赖
• 现代浏览器，支持requestAnimationFrame和CSS3变换（transform）