bootstrap 带有 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>

bootstrap 带有 jquery 打字机插件的响应式图片

bootstrap responsive image with jquery type writer plugin

html

css

jquery

jquery-plugins

twitter-bootstrap-3