1

重複の可能性：
テキストを1文字ずつ表示

説明するのは少し難しいですが、私が達成しようとしているのは、divにテキストを追加することですが、単に表示したり、フェードインしたりするのは望ましくありません。テキストを一度に1文字ずつ表示できるようにしたいのです。たとえば、DSでテキストベースのゲームをプレイします。

4

2 に答える 2

4

これがデモです http://www.thepixelart.com/demo/jticker/

これがダウンロード可能なファイルです http://www.thepixelart.com/demo/jticker/files/jticker.zip

特定の時間に1文字だけが表示されるようにタイマーを変更できます

（また）

html

<div id="text"><span>The intergalactic space agency</span></div>

css

div＃text {幅：0px; 高さ：2em; 空白：nowrap; オーバーフロー：非表示; }

jQuery

var spanWidth = $（'＃test span'）。width（）; $（'＃text'）。animate（{width：spanWidth}、1000）;

これがデモです

http://jsfiddle.net/mrtsherman/6qQrN/1/

于 2012-08-14T23:47:15.013 に答える
2

ビデオゲームで見られるような「タイプライター」効果を実現する1つの方法は次のとおりです（純粋なJavaScriptを使用し、jQueryは必要ありません）。

<div id="text"></div>​

<script type="text/javascript">
    var textToAdd = "your text here";
    var placeHolder = 0;

    var textAdder = setInterval(function(){
        document.getElementById("text").innerHTML += textToAdd.charAt(placeHolder);
        if (++placeHolder == textToAdd.length){
            clearInterval(textAdder);
        }
    }, 100);
​&lt;/script>

デモ

于 2012-08-15T00:00:27.120 に答える