jquery - 使用 jquery 类型编写器插件引导响应图像

Question

我正在使用 Bootstrap 。我的图片动态响应，但我不能在上面使用文字。我想将 jquery 打字机文本放在应该根据屏幕大小调整大小的图像上，这是我的 html，我使用了这个 jquery 插件 http://www.mattboldt.com/demos/typed-js/

<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 centerimg">
<img class="img-responsive" src="img/headerBackground.jpg">
<div class="wrap">
<div class="type-wrap">
<div id="typed-strings">
<span>Typed.js is a <strong>jQuery</strong> plugin.</span>
<p>It <em>types</em> out sentences.</p>
<p>And then deletes them.</p>
<p>Try it out!</p>
</div>
<span id="typed" style="white-space:pre;"></span>
</div>
</div>
</div>
</div>
</div>

这是我用来将这段文字放在图片上的 CSS

.col-lg-12.col-md-12.col-sm-12.col-xs-12.centerimg{
display:block;
margin:auto;
position: relative;}
.col-lg-12.col-md-12.col-sm-12.col-xs-12.centerimg p{
position: absolute;
top: 2%;
left: 2%;}

如果有人帮助我完成它，我将非常感激。我希望 jquery 插件文本位于图像的正中央

Answer 1

您缺少以下 js 函数:

$(function() {
  $("#typed").typed({
    stringsElement: $('#typed-strings')
  });
});

它在github上的文档中repository .还要确保包含 jquery。

$(function() {
  $("#typed").typed({
    stringsElement: $('#typed-strings')
  });
});

.col-lg-12.col-md-12.col-sm-12.col-xs-12.centerimg {
  display: block;
  margin: auto;
  position: relative;
  max-width: 590px;
}
.col-lg-12.col-md-12.col-sm-12.col-xs-12.centerimg p {
  position: absolute;
  top: 2%;
  left: 2%;
}
#typed {
  color: #fff;
}
.wrap {
    position: absolute;
    transform: translate(0, 50%);
    top: 36%;
    left: 0;
    width: 100%;
    text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.4/typed.min.js"></script>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 centerimg">
      <img class="img-responsive" src="http://www.martin4sturgis.com/wp-content/uploads/2015/02/computerScreen.png">
      <div class="wrap">
        <div class="type-wrap">
          <div id="typed-strings">
            <span>Typed.js is a <strong>jQuery</strong> plugin </span>
            <p>It <em>types</em> out sentences.</p>
            <p>And then deletes them.</p>
            <p>Try it out!</p>
          </div>
          <span id="typed" style="white-space:pre;"></span>
        </div>
      </div>
    </div>
  </div>
</div>

---