当前位置：首页 > news >正文

5分钟快速上手：用jQuery.Marquee打造专业级滚动文字效果

news 2026/6/9 18:00:54

5分钟快速上手：用jQuery.Marquee打造专业级滚动文字效果

【免费下载链接】jQuery.MarqueejQuery plugin to scroll the text like the old traditional marquee项目地址: https://gitcode.com/gh_mirrors/jq/jQuery.Marquee

你是否还记得那些年网页上经典的跑马灯效果？那种文字从屏幕一端滚动到另一端的设计，虽然看似简单，却能为网站增添不少活力。今天，我要介绍一个轻量级但功能强大的jQuery插件——jQuery.Marquee，它能让你在现代网页开发中轻松实现这种经典效果，而且支持CSS3动画，性能更优！

🚀 三步配置法：快速创建你的第一个滚动文字

第一步：安装插件到你的项目

jQuery.Marquee提供了多种安装方式，你可以根据项目需求选择最合适的一种：

通过npm安装（推荐）

npm install jquery.marquee --save

直接下载使用

git clone https://gitcode.com/gh_mirrors/jq/jQuery.Marquee

在HTML中直接引入

<script src="jquery.marquee.min.js"></script>

第二步：基础HTML结构搭建

创建一个简单的HTML结构作为滚动文字的容器：

<div class="marquee-container"> <div class="marquee"> 🎉 欢迎来到我的网站！这里有最新的技术分享、实用的开发技巧和有趣的项目案例。 🎉 </div> </div>

第三步：CSS样式美化

为了让滚动效果看起来更专业，添加一些基础样式：

.marquee-container { width: 100%; max-width: 800px; margin: 20px auto; overflow: hidden; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; padding: 15px 0; } .marquee { color: white; font-size: 18px; font-weight: bold; white-space: nowrap; }

🔧 核心特性深度解析：为什么选择jQuery.Marquee

CSS3动画支持：性能优化的秘密武器

jQuery.Marquee最强大的特性之一就是自动检测浏览器是否支持CSS3动画。如果支持，它会优先使用CSS3动画，这比传统的jQuery动画性能要好得多！

$('.marquee').marquee({ // 自动使用CSS3动画（如果浏览器支持） allowCss3Support: true, // CSS3缓动函数 css3easing: 'ease-in-out', // 动画时长 duration: 8000 });

性能对比优势：

CSS3动画：GPU加速，流畅度提升60%以上
jQuery动画：兼容性更好，支持更老浏览器
智能切换：插件自动选择最佳动画方式

灵活的方向控制：不只是左右滚动

很多人以为跑马灯只能左右滚动，但jQuery.Marquee支持四个方向的滚动效果：

// 向左滚动（默认） direction: 'left' // 向右滚动 direction: 'right' // 向上滚动 direction: 'up' // 向下滚动 direction: 'down'

应用场景建议：

新闻头条：使用左右滚动，适合水平空间
股票行情：上下滚动，展示垂直列表
活动公告：根据页面布局选择合适方向

无缝循环效果：让滚动更自然

通过duplicated选项，你可以创建无缝循环的滚动效果，文字会像流水一样连续不断：

$('.marquee').marquee({ duplicated: true, gap: 30, // 文字间的间距 duplicateCount: 2 // 重复次数 });

配置技巧：

当文字内容较短时，建议启用duplicated: true
gap参数控制重复内容之间的间距
duplicateCount可以控制重复次数，默认为1

🎯 实战应用场景：让滚动文字为你的项目增色

场景一：电商网站促销信息展示

电商网站经常需要展示促销信息，jQuery.Marquee可以完美胜任这个任务：

// 促销信息滚动 $('.promotion-marquee').marquee({ duration: 10000, direction: 'left', duplicated: true, pauseOnHover: true, // 鼠标悬停时暂停 startVisible: true, // 开始时可见 // 事件处理 beforeStarting: function() { console.log('促销信息开始滚动'); }, finished: function() { console.log('一轮促销信息滚动完成'); } });

效果特点：

鼠标悬停可暂停，方便用户阅读重要信息
开始时内容可见，用户体验更好
支持事件监听，便于统计和分析

场景二：新闻网站实时头条

新闻网站需要实时更新头条新闻，滚动效果能让用户第一时间看到最新资讯：

<div class="news-ticker"> <span class="news-label">📰 最新消息：</span> <div class="news-marquee"> <!-- 新闻内容通过Ajax动态加载 --> </div> </div>

// 新闻头条动态更新 function updateNewsTicker() { $.ajax({ url: '/api/latest-news', success: function(data) { // 销毁旧的滚动效果 $('.news-marquee').marquee('destroy'); // 更新内容 $('.news-marquee').html(data.news); // 重新应用滚动效果 $('.news-marquee').marquee({ duration: 12000, direction: 'left', pauseOnHover: true }); } }); } // 每30秒更新一次新闻 setInterval(updateNewsTicker, 30000);

场景三：企业网站公告栏

企业网站通常有公告栏区域，用于展示重要通知和公司动态：

// 企业公告滚动配置 $('.announcement-marquee').marquee({ duration: 15000, direction: 'up', // 向上滚动适合较长的公告内容 gap: 20, delayBeforeStart: 2000, // 延迟2秒开始 pauseOnCycle: true, // 每轮结束后暂停 // 每轮结束后显示3秒再继续 pauseOnCycle: function() { setTimeout(function() { $('.announcement-marquee').marquee('resume'); }, 3000); } });

⚡ 进阶技巧与性能优化

响应式设计适配

jQuery.Marquee天生支持响应式设计，但你可能需要根据屏幕尺寸调整配置：

function initMarquee() { var $marquee = $('.marquee'); // 根据屏幕宽度调整速度 var duration = $(window).width() < 768 ? 5000 : 8000; $marquee.marquee({ duration: duration, direction: 'left', duplicated: true, // 移动端禁用悬停暂停 pauseOnHover: $(window).width() > 768 }); } // 窗口大小改变时重新初始化 $(window).resize(function() { $('.marquee').marquee('destroy'); initMarquee(); }); // 页面加载完成后初始化 $(document).ready(initMarquee);

图片内容的特殊处理

如果你的滚动内容中包含图片，需要注意图片加载完成后再初始化插件：

// 等待所有图片加载完成 $(window).load(function() { $('.marquee-with-images').marquee({ duration: 10000, direction: 'left', // 确保图片完全加载后计算宽度 startVisible: true }); });

与其他jQuery插件的协同使用

jQuery.Marquee可以与其他jQuery插件完美配合，创建更丰富的交互效果：

// 结合jQuery UI创建可拖拽的滚动区域 $('.marquee-container').draggable({ axis: 'x', start: function() { // 开始拖拽时暂停滚动 $('.marquee').marquee('pause'); }, stop: function() { // 拖拽结束后恢复滚动 $('.marquee').marquee('resume'); } }); // 初始化滚动效果 $('.marquee').marquee({ duration: 8000, direction: 'left', pauseOnHover: true });