Question

我正在使用jQuery-Marquee来模拟“最新推文”div的字幕效果。但它只适用于Firefox。它在Chrome中正确输出，但由于某种原因，选框不会滚动。有人可以帮我弄清楚发生了什么吗？

HTML（这就是输出）

<div class="latest-tweets">
  <ul class="sf-js-enabled">
    <li>
      <p class="tweet-text">
        <div style="width: 100000px; margin-left: 0px;" class="js-marquee-wrapper">
          <div class="js-marquee" style="margin-right: 0px; float: left;">RT <a class="twitter-screen-name" href="https://twitter.com/Kollaboration" target="_blank">@Kollaboration</a>: Angry Asian American, a new show from <a class="twitter-screen-name" href="https://twitter.com/angryasianman" target="_blank">@angryasianman</a> <a class="twitter-screen-name" href="https://twitter.com/jennyyangtv" target="_blank">@jennyyangtv</a> on <a class="twitter-screen-name" href="https://twitter.com/ISATVofficial" target="_blank">@ISATVofficial</a> Watch the first angry ep. here: http…<a href="http://twitter.com/ISATVofficial/status/447119023319162881" target="_blank">- 1 day ago</a>
          </div>
        </div>
      </p>
    </li>
  </ul>
</div>

JavaScript（在实际网站的页脚中）

<script src="jquery.marquee.min.js"></script>
<script>
  jQuery(function () {
    jQuery('.tweet-text').marquee({
      pauseOnHover: true,
      duration: 8000
    });
  });
</script>

CSS

.latest-tweets {
  color: #ddd;
  float: left;
  line-height: 42px;
}
.latest-tweets ul {
  height: 42px;
  max-width: 550px !important;
  overflow: hidden;
  text-align: left;
}
.latest-tweets li {
  cursor: pointer;
  height: 42px;
}
.latest-tweets p {
  display: inline;
  margin-bottom: 0;
  white-space: nowrap;
}
.tweet-text {
  width: 550px;
  overflow: hidden;
}
.tweet-details {
  margin-left: 10px;
}
.tweet-details a {
  text-transform: none !important;
}

Answer 1

您似乎无法将marquee插件用于display: inline;元素。

尝试删除display: inline;元素上的<p class="tweet-text">或将其更改为display: block;。你可能不得不调整一些其他的CSS来解决这个警告，但这应该解决它。

jQuery-Marquee仅适用于Firefox

1 个答案: