jQuery文字滚动切换动画特效

原创 已于 2025-06-27 10:51:22 修改 · 775 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

于 2025-06-24 13:40:18 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery文字滚动切换动画特效</title>
    <style>
        body {
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: 'Arial', sans-serif;
            overflow: hidden;
            color: white;
        }
        
        .text-slider {
            width: 80%;
            max-width: 800px;
            height: 200px;
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .slider-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            text-align: center;
        }
        
        .slider-text {
            font-size: 2.5rem;
            font-weight: bold;
            line-height: 1.5;
            margin: 0;
            position: absolute;
            width: 100%;
            opacity: 0;
            transition: all 0.8s ease-in-out;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        
        .slider-text.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        .slider-text.next {
            transform: translateY(50px);
        }
        
        .slider-text.prev {
            transform: translateY(-50px);
        }
        
        .controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
        }
        
        .control-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .control-btn:hover {
            background: rgba(255, 255, 255, 0.4);
            transform: scale(1.1);
        }
        
        /* 插入的链接样式 */
        .inserted-link {
            color: #a8edea;
            text-decoration: none;
            font-size: 14px;
            position: absolute;
            top: 20px;
            right: 20px;
            transition: all 0.3s ease;
            padding: 5px 10px;
            border-radius: 20px;
            background: rgba(0, 0, 0, 0.2);
        }
        
        .inserted-link:hover {
            color: #fff;
            background: rgba(0, 0, 0, 0.4);
            text-shadow: 0 0 10px rgba(168, 237, 234, 0.7);
        }
        
        @media (max-width: 768px) {
            .slider-text {
                font-size: 1.8rem;
            }
            
            .text-slider {
                height: 150px;
            }
        }
    </style>
</head>
<body>
    <div class="text-slider">
        <div class="slider-container">
            <p class="slider-text active">欢迎使用文字滚动特效</p>
            <p class="slider-text">轻松创建动态文字切换</p>
            <p class="slider-text">支持多种动画效果</p>
            <p class="slider-text">响应式设计适配各种设备</p>
            <p class="slider-text">点击按钮控制切换</p>
        </div>
        
        <div class="controls">
            <button class="control-btn prev-btn">←</button>
            <button class="control-btn next-btn">→</button>
        </div>
        
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            const texts = $('.slider-text');
            let currentIndex = 0;
            let isAnimating = false;
            
            // 初始化
            function initSlider() {
                texts.each(function(index) {
                    if (index !== currentIndex) {
                        $(this).removeClass('active prev next');
                    } else {
                        $(this).addClass('active');
                    }
                });
            }
            
            // 切换到下一个文本
            function nextText() {
                if (isAnimating) return;
                isAnimating = true;
                
                const nextIndex = (currentIndex + 1) % texts.length;
                
                texts.eq(currentIndex).removeClass('active').addClass('prev');
                texts.eq(nextIndex).addClass('next');
                
                setTimeout(() => {
                    texts.eq(currentIndex).removeClass('prev');
                    texts.eq(nextIndex).removeClass('next').addClass('active');
                    currentIndex = nextIndex;
                    isAnimating = false;
                }, 800);
            }
            
            // 切换到上一个文本
            function prevText() {
                if (isAnimating) return;
                isAnimating = true;
                
                const prevIndex = (currentIndex - 1 + texts.length) % texts.length;
                
                texts.eq(currentIndex).removeClass('active').addClass('next');
                texts.eq(prevIndex).addClass('prev');
                
                setTimeout(() => {
                    texts.eq(currentIndex).removeClass('next');
                    texts.eq(prevIndex).removeClass('prev').addClass('active');
                    currentIndex = prevIndex;
                    isAnimating = false;
                }, 800);
            }
            
            // 自动轮播
            let autoPlayInterval = setInterval(nextText, 3000);
            
            // 鼠标悬停时暂停自动轮播
            $('.text-slider').hover(
                function() {
                    clearInterval(autoPlayInterval);
                },
                function() {
                    autoPlayInterval = setInterval(nextText, 3000);
                }
            );
            
            // 按钮控制
            $('.next-btn').click(nextText);
            $('.prev-btn').click(prevText);
            
            // 键盘控制
            $(document).keydown(function(e) {
                if (e.keyCode === 37) { // 左箭头
                    prevText();
                } else if (e.keyCode === 39) { // 右箭头
                    nextText();
                }
            });
            
            initSlider();
        });
    </script>
</body>
</html>

ziblog
关注
使用jquery实现文字滚动，鼠标悬停效果
guorui_cara的博客
10-26 2927
这就是个简单的小栗子，希望可以帮助前端初学者。 效果：文字无缝滚动，鼠标悬停则停止，鼠标移开则重新滚动。 1、html代码：<div class="scroll"> <ul class="list-unstyled"> <li>苹果</li> <li>橘子</li> <li>香蕉</li> <li>菠萝</li>
jQuery文字切换动画效果.zip
07-11
JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0 , FF 1.5 , Safari 2.0 , Opera 9.0 ），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。
使用jQuery实现图片与文字滚动切换教程
weixin_33557333的博客
08-18 814
jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过简化HTML文档遍历、事件处理、动画和Ajax交互，使得开发者能够轻松编写客户端脚本。自2006年推出以来，jQuery迅速成为全球最受欢迎的JavaScript库之一。jQuery不仅简化了跨浏览器的复杂操作，而且有着广泛的插件生态系统，可以用来增强网页的交互性和视觉效果。它易于学习、文档完善，这使得它成为前端开发新手和经验丰富的专家的首选。网页的视觉效果对于用户体验至关重要。
jquery文字纵向滚动效果（带间隔停留）
weixin_30699955的博客
10-22 161
<script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotation"); var scrollTimer; $this.hover(function() { clearInterval(scrollTimer); ...
jQuery文字滚动特效大全：单行与多行滚动及按钮控制实现
weixin_42599908的博客
10-16 1324
本文还有配套的精品资源，点击获取 简介：本教程详细讲解了如何基于jQuery实现文字滚动效果，包括单行滚动、多行滚动以及带按钮控制的滚动。介绍了使用jQuery的scroll方法来监听滚动条动作，并结合CSS和动画技术创建滚动特效。教程覆盖了单行滚动的基础实现，多行滚动的布局与动画策略，以及按钮控制滚动的交互逻辑。通过本教程，开发者能够为网页添加动态的滚动效果，无论是在展示...
jQuery图片文字交互式滑动切换效果实现
weixin_34163588的博客
08-25 350
jQuery是一个快速、小巧且功能丰富的JavaScript库。它通过减少代码量，简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，让Web开发变得更加便捷。在本章中，我们将探索如何利用jQuery来操作DOM，实现动态的Web页面交互。除了内置的动画效果，jQuery也允许开发者创建自定义动画。自定义动画通常通过修改元素的CSS样式来实现，并且可以指定缓动函数（easing function）来控制动画的加速度和减速度。// 示例代码：实现自定义动画效果。
实现带动画的jQuery TAB滚动切换
weixin_33597080的博客
05-19 820
jQuery自2006年首次发布以来，已经成为最流行的JavaScript库之一。它由John Resig创建，旨在简化客户端脚本编程。随着时间的推移，jQuery发布了多个版本，每个版本都引入了新的功能和改进，如选择器优化、事件处理增强以及支持HTML5和CSS3的特性。社区和插件生态系统的发展，为开发者提供了丰富的资源和工具，使他们能够更容易地进行学习和分享经验。响应式设计是现代前端开发不可或缺的一部分。
jQuery文字滚动切换动画特效.zip
11-22
在这个“jQuery文字滚动切换动画特效.zip”压缩包中，包含了一个使用jQuery实现的文字滚动切换效果，这对于创建动态且吸引人的网页内容展示来说是非常有用的。接下来，我们将深入探讨这个特效涉及到的技术和知识点。...
jQuery网页文字滚动切换动画代码.zip
09-21
综上所述，"jQuery网页文字滚动切换动画代码.zip"提供的解决方案，结合了jQuery的动态效果和CSS的样式控制，使得网页中的文字能够以流畅、吸引人的方式滚动切换。对于网页开发者来说，无论是用于学习还是实际项目，...
jQuery广告文字切换动画特效
06-24
在"jQuery广告文字切换动画特效"中，开发者可以借助jQuery提供的API轻松实现文字的动态切换，例如淡入淡出、滑动、旋转等不同类型的动画效果。这些特效能够使网页内容更加生动，增加用户的互动体验。 首先，要实现...
掌握jQuery实现文字滚动切换动画技巧
资源摘要信息:"jQuery文字滚动切换动画特效" 知识点一：jQuery概述 jQuery是一个快速、小巧、功能丰富的JavaScript库。它封装了JavaScript常用的功能代码，提供了一套易于使用的API，使得在HTML文档中操作DOM、处理...
CSS 网页布局：技术基础与实践技巧
最新发布
csbysj2020的博客
12-02 477
CSS网页布局是前端开发中的核心技术之一，掌握CSS布局的基础知识和实践技巧对于成为一名优秀的前端开发者至关重要。本文介绍了CSS布局的基础知识、布局模型、实践技巧以及响应式布局，希望对读者有所帮助。
主题切换（1）：css变量的使用（:root）
Z_Wonderful的博客
12-01 405
:root 是一个伪类选择器，它匹配文档的根元素（即 <html> 元素）。使用 :root 定义 CSS 变量（自定义属性）可以让变量具有全局作用域，方便在整个项目中统一管理和动态调整样式
03.CSS嵌套 (Nesting)
粉丝们务必加入微信粉丝群
11-29 192
CSS嵌套是现代CSS中的一个革命性特性，它让开发者能够以更直观、更有组织的方式编写样式代码。通过嵌套，你可以创建反映HTML结构的CSS代码，提高代码的可读性和可维护性。CSS嵌套允许你通过将选择器嵌套在一起来编写更易维护和逻辑清晰的样式规则，类似于Sass等预处理器，但这是CSS的原生功能。理解CSS嵌套的基本概念和语法。了解嵌套的最佳实践和注意事项。掌握嵌套与媒体查询的结合使用。学会使用父选择器引用(&)掌握嵌套选择器的使用方法。父选择器引用 (&)
HTML/CSS 核心考点详解（字节跳动 ToB 中台场景）
2402_87628679的博客
12-01 833
语义化 HTML 就是用有明确含义的标签（如<header><nav><main>）替代无意义的通用标签<div>，让 HTML 结构 “自解释”—— 不用看 CSS/JS，就能看懂页面各部分的功能。块级格式化上下文，是一个 “独立的渲染区域”，区域内的元素布局不受外部影响，同时也不会影响外部元素。可以理解为：BFC 是一个 “隔离的盒子”，盒子里的元素怎么布局，都和盒子外的元素没关系。知识点核心考点实战场景语义化 HTML常用语义标签、结构合理性系统页面布局、模块划分Flex 布局。
CSS content-visibility
随笔
11-29 304
是一个强大的性能优化工具，特别适合内容丰富的长页面。通过智能地跳过不可见内容的渲染，可以显著提升页面加载速度和交互体验。但在使用时需要注意浏览器兼容性和潜在的可访问性问题，合理搭配来避免布局抖动。
DOM 节点
csbysj2020的博客
11-29 432
DOM节点是构成HTML文档的基本单元，包括元素节点、文本节点、属性节点等。每个节点都代表文档中的一个特定部分，如标题、段落、链接等。通过操作DOM节点，开发者可以动态地修改网页内容、样式和行为。DOM节点是Web开发中不可或缺的概念，掌握DOM节点操作方法对于开发高性能、可维护的网页至关重要。本文介绍了DOM节点的概念、类型、属性以及操作方法，希望对您有所帮助。在实际开发过程中，不断积累和总结，您将更加熟练地运用DOM节点。
主题切换（2）：CSS 变量（自定义属性）
Z_Wonderful的博客
12-01 1051
系统主题切换。在大型项目中，为了更好地组织 CSS 变量（自定义属性）、主题切换，通常会将变量定义在单独的文件中，然后在需要的地方引入。这样可以实现全局变量的统一管理，同时保持代码的可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值