Question

我有一个简单的html页面我正在使用typed.js这是一个Jquery插件来输出文本。

问题是输出时p标签中的文本都没有风格化 p标签中的文本也是逐个打印出来的
我希望一次打字。
不确定如何解决这些问题。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <style type="text/css" media="all">
        center {
            position: relative;
            margin-top: 10%;
            line-height: 20px;
        }
        p {
            /*font-family: Monaco, monospace; */
            font-family: 'Lucida Console', monospace;
            font-size: 1.2em;
            color:#00FF00;
        }
    </style>
    <title>Personal Website</title>
</head>
<body bgcolor="">
    <center>
        <div id="typed-strings"> 
            <p>Some text </p>
            <p>This is some more text.</p>
            <p>No more text after this.</p>
        </div>
        <span id="typed"></span>
    </center>
    <script src="jquery.js"></script>
    <script src="typed.js" type="text/javascript"></script>
    <script>
        $(function(){
            $("#typed").typed({
                stringsElement: $('#typed-strings'),
                typeSpeed: 0,
            });
        });
    </script>
</body>
</html>

Answer 1

对我来说，你的代码工作正在检查这里的变化是你没有给出＃typed

的样式

http://jsfiddle.net/8CbL2/25/

   p,#typed {
            /*font-family: Monaco, monospace; */
            font-family: 'Lucida Console', monospace;
            font-size: 1.2em;
            color:#00FF00;
        }

Answer 2

这是因为typed.js会将您的文字输入另一个HTML元素。在您的代码中，您可以指定它以span与id=typed一起输入。所以将此选择器添加到CSS：

p, #typed {
    /*font-family: Monaco, monospace; */
    font-family: 'Lucida Console', monospace;
    font-size: 1.2em;
    color: #00FF00;
}

如果您想要定位键入光标，也可以将.typed-cursor添加到您的选择器列表中。

p造型没有出现。逐个输入

2 个答案: