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 - 用户说话内容