我正在尝试使用这个名为 Typpy Tappy Typer 的 jQuery 脚本 https://codepen.io/stevn/pen/jEZvXa/在 slider 上。我能够让它工作,但在完成某张幻灯片后,它不会重做打字机动画。
谁能帮我循环这个函数,让它连续运行?
下面是一段代码:
function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 100,
tempTypeSpeed = 0;
var type = function() {
if (writingTag === true) {
tag += HTML[cursorPosition];
}
if (HTML[cursorPosition] === "<") {
tempTypeSpeed = 0;
if (tagOpen) {
tagOpen = false;
writingTag = true;
} else {
tag = "";
tagOpen = true;
writingTag = true;
tag += HTML[cursorPosition];
}
}
if (!writingTag && tagOpen) {
tag.innerHTML += HTML[cursorPosition];
}
if (!writingTag && !tagOpen) {
if (HTML[cursorPosition] === " ") {
tempTypeSpeed = 0;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
writingTag = false;
if (tagOpen) {
var newSpan = document.createElement("span");
t.appendChild(newSpan);
newSpan.innerHTML = tag;
tag = newSpan.firstChild;
}
}
cursorPosition += 1;
if (cursorPosition < HTML.length - 1) {
setTimeout(type, tempTypeSpeed);
}
};
return {
type: type
};
}
var typer = document.getElementById('typewriter');
typewriter = setupTypewriter(typewriter);
typewriter.type();
.var-highlight{
color: #C0AD60;
}
.string-highlight{
color: rgba(253, 149, 90, 0.8);
}
#typewriter{
font-size: 2em;
margin: 0;
font-family: "Courier New";
&:after{
content: "|";
animation: blink 500ms linear infinite alternate;
}
}
@-webkit-keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
@-moz-keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
@keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
<pre id="typewriter">
<span class="var-highlight">var</span> object = {
name: <span class="string-highlight">'Foo'</span>,
type: <span class="string-highlight">'Bar'</span>,
location: <span class="string-highlight">'Earth'</span>,
properties:[<span class="string-highlight">'Javascript'</span>,
<span class="string-highlight">'HTML'</span>,
<span class="string-highlight">'CSS'</span>];
}; </pre>
最佳答案
假设循环应该重置输入的文本然后重新输入,修改循环结束时的检查将简单地实现这一点:
cursorPosition += 1;
if (cursorPosition < HTML.length - 1) {
setTimeout(type, tempTypeSpeed);
} else {
// This new code will reset the output to the start again
cursorPosition = 0;
t.innerHTML = "";
setTimeout(type, tempTypeSpeed);
}
它的作用是在输入最后一个字符后“重置”输出。整个输出然后重新开始。
这是一个工作片段:
function setupTypewriter(t) {
var HTML = t.innerHTML;
t.innerHTML = "";
var cursorPosition = 0,
tag = "",
writingTag = false,
tagOpen = false,
typeSpeed = 100,
tempTypeSpeed = 0;
var type = function() {
if (writingTag === true) {
tag += HTML[cursorPosition];
}
if (HTML[cursorPosition] === "<") {
tempTypeSpeed = 0;
if (tagOpen) {
tagOpen = false;
writingTag = true;
} else {
tag = "";
tagOpen = true;
writingTag = true;
tag += HTML[cursorPosition];
}
}
if (!writingTag && tagOpen) {
tag.innerHTML += HTML[cursorPosition];
}
if (!writingTag && !tagOpen) {
if (HTML[cursorPosition] === " ") {
tempTypeSpeed = 0;
}
else {
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
}
t.innerHTML += HTML[cursorPosition];
}
if (writingTag === true && HTML[cursorPosition] === ">") {
tempTypeSpeed = (Math.random() * typeSpeed) + 50;
writingTag = false;
if (tagOpen) {
var newSpan = document.createElement("span");
t.appendChild(newSpan);
newSpan.innerHTML = tag;
tag = newSpan.firstChild;
}
}
cursorPosition += 1;
if (cursorPosition < HTML.length - 1) {
setTimeout(type, tempTypeSpeed);
} else {
cursorPosition = 0;
t.innerHTML = "";
setTimeout(type, tempTypeSpeed);
}
};
return {
type: type
};
}
var typer = document.getElementById('typewriter');
typewriter = setupTypewriter(typewriter);
typewriter.type();
.var-highlight{
color: #C0AD60;
}
.string-highlight{
color: rgba(253, 149, 90, 0.8);
}
#typewriter{
font-size: 2em;
margin: 0;
font-family: "Courier New";
&:after{
content: "|";
animation: blink 500ms linear infinite alternate;
}
}
@-webkit-keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
@-moz-keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
@keyframes blink{
0%{opacity: 0;}
100%{opacity: 1;}
}
<pre id="typewriter">
<span class="var-highlight">var</span> object = {
name: <span class="string-highlight">'Foo'</span>,
type: <span class="string-highlight">'Bar'</span>,
location: <span class="string-highlight">'Earth'</span>,
properties:[<span class="string-highlight">'Javascript'</span>,
<span class="string-highlight">'HTML'</span>,
<span class="string-highlight">'CSS'</span>];
}; </pre>
关于jQuery 打字机效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59247333/