HTML中的Typed.js代码不起作用

时间:2018-03-13 06:53:21

标签: javascript html model-view-controller

我正在尝试在我的主页上使用键入的文本。我添加了html和js代码和脚本,但它不起作用。它只显示3个引号,它应该一次显示一个引号。以下是我的代码,任何帮助将不胜感激。

Index.cshtml

 <div class="container">
                <div class="agile_banner_info">
                    <div class="agile_banner_info1">
                        <h3>Welcome To <span>Business</span></h3>
                        <div id="typed-strings" class="agileits_w3layouts_strings"> @*The following text should have the typing effect*@
                            <p>Global leaders <i>in Business Process</i> and Enterprise Content Management</p>
                            <p>Business <i>efficiency</i> through BPM</p>
                            <p>Increasing <i>productivity.</i> Take informed decisions</p>
                        </div>
                        <span id="typed" style="white-space:pre;"></span>
                    </div>
                    <div class="banner_agile_para">
                        <p>Our aim is to help our customers succeed</p>
                    </div>
                    <div class="wrapper-inner-tab-backgrounds">
                        <div class="wrapper-inner-tab-backgrounds-first"><a href="single.html"><div class="sim-button button17">Read More</div></a></div>
                    </div>
                </div>
            </div>

<script src="~/Content/MyTemplate/js/typed.js" type="text/javascript"></script>
    <script>
        $(function () {

            $("#typed").typed({
               
                stringsElement: $('#typed-strings'),
                typeSpeed: 30,
                backDelay: 500,
                loop: false,
                contentType: 'html', 
                loopCount: false,
                callback: function () { foo(); },
                resetCallback: function () { newTyped(); }
            });

            $(".reset").click(function () {
                $("#typed").typed('reset');
            });

        });

        function newTyped() { /* A new typed object */ }

        function foo() { console.log("Callback"); }
    </script>

1 个答案:

答案 0 :(得分:0)

我在脚本中添加了您的文字并注释掉HTML内容。希望这会对你有所帮助。

&#13;
&#13;
$(function(){
      $("#typed").typed({
        strings: ["Global leaders <i>in Business Process</i> and Enterprise Content Management", "Business <i>efficiency</i> through BPM","Increasing <i>productivity.</i> Take informed decisions"],
        typeSpeed: 110, // typing speed
        backDelay: 500, // pause before backspacing
        loop: true,
      });
  });
&#13;
 <div class="container">
                <div class="agile_banner_info">
                    <div class="agile_banner_info1">
                        <h3>Welcome To <span>Business</span></h3>
                    <!-- <div id="typed-strings" class="agileits_w3layouts_strings"> @*The following text should have the typing effect*@
                            <p>Global leaders <i>in Business Process</i> and Enterprise Content Management</p>
                            <p>Business <i>efficiency</i> through BPM</p>
                            <p>Increasing <i>productivity.</i> Take informed decisions</p>
                        </div>
 -->
                        <span id="typed" style="white-space:pre;"></span>
                    </div>
                    <div class="banner_agile_para">
                        <p>Our aim is to help our customers succeed</p>
                    </div>
                    <div class="wrapper-inner-tab-backgrounds">
                        <div class="wrapper-inner-tab-backgrounds-first"><a href="single.html"><div class="sim-button button17">Read More</div></a></div>
                    </div>
                </div>
            </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
&#13;
&#13;
&#13;