Question

{{1}}

上面是我的代码，有没有办法让对话框div中的文字出现在打字效果中？我一直在搜索，大多数教程都是基于单行，因为我有多行，我不知道该怎么做。任何帮助，将不胜感激。谢谢！

Answer 1

选中 Fiddle

<强> HTML

<div id="container">
    <div id="background"></div>
    <div id="dialog">
        <p>Hello there!</p>
    </div>
    <div id="button">
        <img src="images/images/sceond3.jpg" width="126" height="210" alt=""/>
    </div>
</div>

<强> JAVASCRIPT

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    var counter = 0;

    function typeWriter(el,i,str) {
        if (typeof str == "undefined") var str=$(el).text();
        if (typeof i == "undefined") var i=0;
        var text = str.slice(0, ++i);
        if (text != str){
            setTimeout(function(){typeWriter(el,i,str)}, 150);
        }
        $(el).text(text);
    };

    function showDialog() {
        if (counter == 0) {
            $("#dialog p").text("Testing Second Line!");
            typeWriter('#dialog p');
        }
        if (counter == 1) {
            $("#dialog p").text("Testing Third Line!");
            typeWriter('#dialog p');
        }
        if (counter == 2) {
            window.location.href = 'third.html';
        }
        counter++;
    }

    $('#button').on('click',showDialog)
</script>

在函数showdialog（）上添加打字效果

1 个答案: