如何使此JavaScript文字效果工作？

昨天我在找一個使用javascript的文字效果。我被指向這個小提琴：http://jsfiddle.net/vCx6W/1/，這是它發佈的地方：https://stackoverflow.com/questions/4074399/what-to-choose-for-typewriter-effect-in-javascript 如何使此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>

但是，我無法使文本顯示在所有。我究竟做錯了什麼？

來源

2012-12-04 KPO

對我來說正常工作與糾正jquery路徑 – HashtagMarkus

也許使用正確的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-04 14:52:47 Arcturus

謝謝。我更新了，但它仍然無法工作。 – KPO

http://code.jquery.com/刪除換行符，以便連接jquery-1.7.2;） – Arcturus

對不起，我無法理解。你說有間距問題？ – KPO

我的猜測，這是不是與JavaScript的一個問題，但與加載所需要的資源。

我無法通過您所提供的加載jQuery的：

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

一個簡單的方法來發現這是瀏覽器的開發者工具（我使用Chrome）。當我在Chrome中使用此代碼打開頁面時，按f12打開開發人員工具，然後檢查控制檯，我收到錯誤「加載資源失敗：服務器響應狀態爲404（未找到）http://code.jquery.com/%20jquery-1.4.2.min.js

另外，我注意到小提琴使用jQuery 1.7.2。如果仍有問題，請嘗試1.7.2而不是1.4.2。

來源

2012-12-04 15:00:23 Sean

嘿我更新到1.7.2。我還使用了@ arcturus的建議，它仍然不會呈現。 – KPO

你有螢火蟲，使用谷歌瀏覽器，或任何與JavaScript控制檯？那裏可能會有錯誤來解決問題。 – Sean

是的，我有螢火蟲。但在複製他以上的工作之後。 – KPO

如何使此JavaScript文字效果工作？

回答

相關問題