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>

使用jquery类型编写器插件

1 个答案: