Question

昨天我一直在寻找使用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>

但是，我根本无法显示文字。我做错了什么？

Answer 1

也许使用正确的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>

Answer 2

我的猜测这不是javascript的问题，而是加载所需的资源。

我无法通过您提供的网址加载jquery：

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

找到这个的简单方法是使用浏览器的开发者工具（我使用Chrome）。当我在Chrome中打开包含此代码的页面时，按f12打开开发人员工具，然后检查控制台，我收到错误“无法加载资源：服务器响应状态为404（未找到）{{3 }}

另外，我注意到小提琴正在使用jQuery 1.7.2。如果您仍然遇到问题，请尝试使用1.7.2而不是1.4.2。

如何使这个JavaScript文本效果工作？

2 个答案: