diff --git a/ShengShengBuXi/Pages/Index.cshtml b/ShengShengBuXi/Pages/Index.cshtml index a5291ea..2b7f906 100644 --- a/ShengShengBuXi/Pages/Index.cshtml +++ b/ShengShengBuXi/Pages/Index.cshtml @@ -140,7 +140,7 @@ fontSize: '40px', // 右侧文字大小 fontWeight: '700', // 右侧文字粗细 fontStyle: 'italic', // 右侧文字样式 - typewriterSpeed: 250 // 右侧文字打字机速度(毫秒),减慢到1/5 + typewriterSpeed: 330 // 右侧文字打字机速度(毫秒),减慢到1/5 }, // 水波纹效果配置 waterEffect: { @@ -191,6 +191,41 @@ }); } + /** + * 打字机效果函数(带渐显) + * @@param {string} selector - 目标元素选择器 + * @@param {string} text - 要显示的文本 + * @@param {number} speed - 打字速度(毫秒) + * @@param {Function} callback - 完成后的回调函数 + */ + function typewriterEffect(selector, text, speed, callback) { + if (isAnimating) return; + isAnimating = true; + + var i = 0; + $(selector).html('').css('opacity', 1); + + function typeWriter() { + if (i < text.length) { + // 创建一个新的 span 元素包含当前字符 + const charSpan = $('').text(text.charAt(i)); + charSpan.css('opacity', 0); // 初始透明度为0 + $(selector).append(charSpan); // 添加到容器 + + // 对这个字符应用淡入效果 + charSpan.animate({opacity: 1}, speed * 0.8, function() { + // 淡入完成后继续下一个字符 + i++; + setTimeout(typeWriter, speed * 0.2); + }); + } else { + isAnimating = false; + if (callback) callback(); + } + } + typeWriter(); + } + /** * 添加文字到左侧历史记录 * @@param {string} text - 要添加的文字 @@ -232,42 +267,22 @@ let i = 0; function typeHistoryText() { if (i < text.length) { - newP.html(newP.html() + text.charAt(i)); - i++; - setTimeout(typeHistoryText, CONFIG.leftContainer.typewriterSpeed); + // 创建字符 span 并设置初始透明度 + const charSpan = $('').text(text.charAt(i)); + charSpan.css('opacity', 0); + newP.append(charSpan); + + // 字符淡入效果 + charSpan.animate({opacity: 1}, CONFIG.leftContainer.typewriterSpeed * 0.8, function() { + i++; + setTimeout(typeHistoryText, CONFIG.leftContainer.typewriterSpeed * 0.2); + }); } } typeHistoryText(); return true; } - /** - * 打字机效果函数(带渐显) - * @@param {string} selector - 目标元素选择器 - * @@param {string} text - 要显示的文本 - * @@param {number} speed - 打字速度(毫秒) - * @@param {Function} callback - 完成后的回调函数 - */ - function typewriterEffect(selector, text, speed, callback) { - if (isAnimating) return; - isAnimating = true; - - var i = 0; - $(selector).html('').css('opacity', 1); - - function typeWriter() { - if (i < text.length) { - $(selector).html($(selector).html() + text.charAt(i)); - i++; - setTimeout(typeWriter, speed); - } else { - isAnimating = false; - if (callback) callback(); - } - } - typeWriter(); - } - /** * 显示用户说话内容 * @@param {string} text - 用户说话内容