首页 文章

typed.js问题

提问于
浏览 次
-1

尝试将typed.js实现为我的基本网页中的一项功能，但是，我遇到了一些问题 . 我已将typed.js文件移动到我的文件结构中 - js/typed.js .

我确信这是一个非常简单的问题，我根本无法弄清楚 . 向正确的方向点头表示赞赏 .

HTML

<h1 id="mainTitle">Hello World</h1>
<p id="subTitle"></p>

jQuery的

$(document).ready(function(){
    $("#subTitle").typed({
        strings: [
        "Hello World!"
        "My Name is John"
        ],

        typeSpeed: 70,
        backDelay: 200,
        loop: true
    })
})

CSS

#subTitle {

  position: absolute;
    color: #F7F2F2;
  transform: translate(0, -50%);
  font-size: 48px;
}
jquery html css typed.js

2 回答

  • 0
    strings: [
    "Hello World!"
    "My Name is John"
    ],

    你的sintax是错的 . 替换为

    strings: [
    "Hello World!",
    "My Name is John"
    ],
    回复于
  • 0

    Try this

    我使用了 span 标签并删除了 h2 and p tag ，并且脚本中还缺少分号 .

    如果使用 h2 tag 则光标将无法正常显示 . 它将显示在文本下方 . 我不是100％确定它在使用h2标签时是否有效，因为我试过并且光标显示在下面 . 检查示例 .

    如果使用h2标签，请查看输出，它将显示下面的光标 .

    https://codepen.io/Narendra_verma/pen/POXPgW

    如果使用 span 标签 .

    https://codepen.io/Narendra_verma/pen/EbGVzM

    <head>
  <title></title>
  <style type="text/css">
  </style>
</head>
<body>

<span id="mainTitle"></span>

<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="js/typed.min.js"></script>
<script type="text/javascript">
    $(function(){
      $("#mainTitle").typed({
        strings: ["Hello World!", "My Name is John"],
        typeSpeed: 110, // typing speed
        backDelay: 500, // pause before backspacing
        loop: true,
      });
  });

</script>
</body>
</html>
    回复于

相关问题