0

昨日、JavaScriptを使ったテキスト効果を探していました。私はこのフィドルを指摘されました：http： //jsfiddle.net/vCx6W/1/そしてこれはそれが投稿された場​​所です： https ：//stackoverflow.com/questions/4074399/what-to-choose-for-typewriter-effect -in-javascript

私は同じものを使おうとしています。私は次のようにJavaScriptを追加しました：

 <script type="text/javascript" src="http://code.jquery.com/
 jquery-1.4.2.min.js"></script>

 <script type="text/javascript">
 $.fn.teletype = function(opts) {
 var $this = this,
    defaults = {
        animDelay: 50
    },
    settings = $.extend(defaults, opts);

 $.each(settings.text, function(i, letter) {
    setTimeout(function() {
        $this.html($this.html() + letter);
    }, settings.animDelay * i);
 });
 };

 $(function() {
 $('#container').teletype({
    animDelay: 100,
    text: 'Now is the time for all good men to come to the aid of their country...'
 });
 });
 </script>

そしてこれはHTMLで：

 <div id="container"></div>

しかし、テキストをまったく表示させることができません。私は何が間違っているのですか？

4

2 に答える 2

3

おそらく正しいjQueryフレームワークを使用していますか?

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

http://code.jquery.com/ ... ;)の後のブレークラインも削除します。

このような：

<html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

     <script type="text/javascript">
     $.fn.teletype = function(opts) {
     var $this = this,
        defaults = {
            animDelay: 50
        },
        settings = $.extend(defaults, opts);

     $.each(settings.text, function(i, letter) {
        setTimeout(function() {
            $this.html($this.html() + letter);
        }, settings.animDelay * i);
     });
     };

     $(function() {
     $('#container').teletype({
        animDelay: 100,
        text: 'Now is the time for all good men to come to the aid of their country...'
     });
     });
     </script>

    </head>
    <body>

       <div id="container"></div>
    </body>
</html>
于 2012-12-04T14:52:47.443 に答える
1

私の推測では、これはjavascriptの問題ではなく、必要なリソースのロードに問題があります。

指定したURLからjqueryを読み込めません：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>'

これを見つける簡単な方法は、ブラウザの開発者ツールを使用することです（私はChromeを使用しています）。Chromeでこのコードを含むページを開き、f12を押して開発者ツールを開き、コンソールを確認すると、「リソースの読み込みに失敗しました：サーバーがhttp：/のステータス404（見つかりません）で応答しました」というエラーが表示されます。 /code.jquery.com/%20jquery-1.4.2.min.js

また、フィドルがjQuery1.7.2を使用していることに気づきました。それでも問題が解決しない場合は、1.4.2ではなく1.7.2を試してください。

于 2012-12-04T15:00:23.080 に答える