Schreibmaschinen-Effekt für HTML mit JavaScript [duplizieren]
Ich möchte Folgendes tun: Ich möchte einen Schreibmaschineneffekt in HTML / JavaScript (jQuery / jQuery UI, falls erforderlich) haben. Es gibt eine Menge toller Beispiele dafür, wie man einen Schreibmaschineneffekt auf einer Zeichenkette erzeugt (zum Beispiel this one <) / a>). Ich möchte etwas ähnliches tun, aber mit einer vollständigen HTML-Zeichenfolge, die nicht getippt, sondern richtig in die Webseite eingefügt werden sollte.
Beispielzeichenfolge:
%Vor%Diese Zeichenfolge sollte mit einer Schreibmaschinenanimation eingegeben werden. Die Farbe von "special string" sollte rot sein, sogar während der Eingabe, und das Bild sollte nach dem Wort "an" und vor dem Wort "image" erscheinen. Das Problem mit den Lösungen besteht darin, dass sie das Markup Zeichen für Zeichen in die Webseite einfügen, was zu einem Nicht-Schließen während der Eingabe der "speziellen Zeichenfolge" in diesem Beispiel führt. Ich überlegte, die Zeichenfolge mit jQuery zu analysieren und über das Array zu iterieren, aber ich habe keine Ahnung, wie ich mit verschachtelten Tags umgehen würde (wie p und span in diesem Beispiel)
3 Antworten
Ich denke, du brauchst kein Plugin, um das Zeug zu machen, ich habe ein einfaches Beispiel gemacht:
html:
%Vor%js:
%Vor%Und hier ist die Demo auf jsfiddle
Es gibt ein fantastisches Plugin auf Github, hier . Ein Beispiel aus der README sieht so aus:
Es ist nett und konfigurierbar, je nachdem wie menschenähnlich die Ausgabe sein soll. Ein einfaches Beispiel sieht so aus:
%Vor%Ich werde Sie zu meinem alten Website-Design weiterleiten, das es verwendet hat.
Es verwendet jTypeWriter.js, blink.js und jquery.
In der Quelle werden Sie den Code.
Sie sollten sich function start()
und das wird das Login-Design starten. Ich stelle es tatsächlich auf Pause, weil es tatsächlich einige kleinere Probleme gibt, an denen ich arbeite, aber Sie können zumindest ein funktionierendes Beispiel sehen:)
code:
%Vor%Auszeichnung:
%Vor%Tags und Links javascript html string jquery