jQuery动态文字跳动动画特效

ziblog

已于 2025-06-27 11:04:34 修改

阅读量401

点赞数 4

CC 4.0 BY-SA版权

文章标签： jQuery 动态文字跳动动画特效

于 2025-06-20 15:51:22 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148794210

<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e, #16213e);
font-family: 'Arial', sans-serif;
overflow: hidden;
}

.container {
text-align: center;
padding: 20px;
}

.jumping-text {
display: inline-block;
font-size: 5rem;
font-weight: bold;
color: white;
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.jumping-text span {
display: inline-block;
position: relative;
transform-origin: bottom center;
}

.controls {
margin-top: 40px;
}

button {
background: linear-gradient(45deg, #4CAF50, #8BC34A);
color: white;
border: none;
padding: 12px 24px;
margin: 0 10px;
border-radius: 50px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

button:active {
transform: translateY(1px);
}

.credit {
margin-top: 40px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}

.credit a {
color: #4CAF50;
text-decoration: none;
transition: color 0.3s;
}

.credit a:hover {
color: #FFD700;
}

/* 浮动粒子背景 */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}

.particle {
position: absolute;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: float 15s linear infinite;
}

@keyframes float {
0% {
transform: translateY(0) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.5;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="particles" id="particles"></div>

<div class="container">
<h1 class="jumping-text" id="jumpingText">跳动文字特效</h1>

<div class="controls">
<button id="startBtn">开始跳动</button>
<button id="stopBtn">停止跳动</button>
<button id="changeTextBtn">改变文字</button>
</div>

<div class="credit">
</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
// 创建浮动粒子背景
function createParticles() {
const container = $('#particles');
const colors = ['rgba(255,255,255,0.3)', 'rgba(255,255,255,0.2)', 'rgba(255,255,255,0.1)'];

for (let i = 0; i < 20; i++) {
const particle = $('<div class="particle"></div>');

// 随机大小
const size = Math.random() * 10 + 5;
particle.css({
width: `${size}px`,
height: `${size}px`
});

// 随机位置
particle.css({
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100 + 100}%`
});

// 随机颜色
particle.css('background', colors[Math.floor(Math.random() * colors.length)]);

// 随机动画延迟和持续时间
particle.css({
animationDelay: `${Math.random() * 15}s`,
animationDuration: `${Math.random() * 10 + 10}s`
});

container.append(particle);
}
}

// 初始化文字跳动效果
function initJumpingText() {
const text = $('#jumpingText').text();
$('#jumpingText').html('');

for (let i = 0; i < text.length; i++) {
const char = text[i] === ' ' ? ' ' : text[i];
$('#jumpingText').append(`<span>${char}</span>`);
}
}

// 文字跳动动画
function startJumping() {
$('#jumpingText span').each(function(index) {
const $char = $(this);
const delay = index * 100;

// 清除之前的动画
$char.stop(true, true);

// 随机跳动高度
const jumpHeight = Math.random() * 30 + 20;

// 跳动动画
function jump() {
$char.animate({
'bottom': jumpHeight
}, 200)
.animate({
'bottom': 0
}, 200, function() {
// 随机决定是否再次跳动
if (Math.random() > 0.3) {
setTimeout(jump, Math.random() * 1000);
} else {
setTimeout(jump, Math.random() * 500 + 500);
}
});
}

// 开始跳动
setTimeout(jump, delay);
});
}

// 停止跳动
function stopJumping() {
$('#jumpingText span').stop(true, true).css('bottom', 0);
}

// 改变文字
function changeText() {
const texts = [
"欢迎访问网站",
"jQuery特效",
"文字跳动动画",
"前端开发技术",
"动态效果展示"
];
const randomText = texts[Math.floor(Math.random() * texts.length)];

$('#jumpingText').text(randomText);
initJumpingText();
startJumping();
}

// 初始化
createParticles();
initJumpingText();

// 按钮事件
$('#startBtn').click(startJumping);
$('#stopBtn').click(stopJumping);
$('#changeTextBtn').click(changeText);

// 自动开始
setTimeout(startJumping, 1000);
});
</script>
</body>
</html>