样式新闻收录机以包含 Break 语句

Question

我正在努力创建一个 List news ticker 并在此 link 上找到了一个简单的实现： jQuery News Ticker

我想在生成的动态列表内容中包含 <br> 语句，并希望新闻滚动条自动管理滚动条的高度。

但是，包含 <br/> 元素的列表项不会在多行中显示新闻项。请注意，在我的实际代码中，列表内容将动态生成，因此，我的新闻滚动条应该能够在其内容中管理任意数量的 <br/> 并动态管理滚动条的高度。

任何人都可以建议如何实现这一目标吗？

这是我的示例代码：

var ticker = $("#ticker");
var t;

var li_count = 1;
var li_length = $("ul.news-list li").length;

var li = $("li").first();

var runTicker = function(trans_width) {
  $(li).css({
    "left": +trans_width + "px"
  });
  t = setInterval(function() {
    if (parseInt($(li).css("left")) > -$(li).width()) {
      $(li).css({
        "left": parseInt($(li).css("left")) - 1 + "px",
        "display": "block"
      });
    } else {
      clearInterval(t);
      trans_width = ticker.width();
      li = $(li).next();
      if (li_count == li_length) {
        li_count = 1;
        li = $("li").first();
        runTicker(trans_width);
      } else if (li_count < li_length) {
        li_count++;
        setTimeout(function() {
          runTicker(trans_width);
        }, 500);
      }
    }
  }, 5);
}
$(ticker).hover(function() {
    clearInterval(t);
  },
  function() {
    runTicker(parseInt($(li).css("left")));
  });
runTicker(ticker.width());

#ticker {
  line-height: 1.8em;
  max-width: 600px;
  color: #000;
  overflow: hidden;
  min-height: 40px;
  height: auto;
}

.news-list {
  padding: 0;
  margin: 0;
  position: relative;
  list-style-type: none;
}

ul.news-list>li {
  position: absolute;
  white-space: nowrap;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="ticker">
  <ul class="news-list">
    <li>
      <p>My Paragraph<br/> with break.</p>
    </li>
    <li>
      <ul>
        <li>My Paragraph</li>
      </ul>
    </li>
    <li>"You've gotta dance like there's nobody watching, <br/> with break. Love like you'll never be hurt, <br/> with break. Sing like there's nobody listening, And live like it's heaven on earth<br/> with break." - <strong><i>William W. Purkey</i></strong></li>
  </ul>
</div>

Answer 1

请从 class“.news-list”

中删除语句“position:relative;”

var ticker = $("#ticker");
var t;

var li_count = 1;
var li_length = $("ul.news-list li").length;

var li = $("li").first();

var runTicker = function(trans_width) {
  $(li).css({
    "left": +trans_width + "px"
  });
  t = setInterval(function() {
    if (parseInt($(li).css("left")) > -$(li).width()) {
      $(li).css({
        "left": parseInt($(li).css("left")) - 1 + "px",
        "display": "block"
      });
    } else {
      clearInterval(t);
      trans_width = ticker.width();
      li = $(li).next();
      if (li_count == li_length) {
        li_count = 1;
        li = $("li").first();
        runTicker(trans_width);
      } else if (li_count < li_length) {
        li_count++;
        setTimeout(function() {
          runTicker(trans_width);
        }, 500);
      }
    }
  }, 5);
}
$(ticker).hover(function() {
    clearInterval(t);
  },
  function() {
    runTicker(parseInt($(li).css("left")));
  });
runTicker(ticker.width());

#ticker {
  line-height: 1.8em;
  max-width: 600px;
  color: #000;
  overflow: hidden;
  min-height: 40px;
  height: auto;
}

.news-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

ul.news-list>li {
  position: absolute;
  white-space: nowrap;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="ticker">
  <ul class="news-list">
    <li>
      <p>My Paragraph<br/> with break.</p>
    </li>
    <li>
      <ul>
        <li>My Paragraph</li>
      </ul>
    </li>
    <li>"You've gotta dance like there's nobody watching, <br/> with break. Love like you'll never be hurt, <br/> with break. Sing like there's nobody listening, And live like it's heaven on earth<br/> with break." - <strong><i>William W. Purkey</i></strong></li>
  </ul>
</div>

var ticker = $("#ticker");
var t;

var li_count = 1;
var li_length = $("ul.news-list li").length;

var li = $("li").first();

var runTicker = function(trans_width) {
  $(li).css({
    "left": +trans_width + "px"
  });
  t = setInterval(function() {
    if (parseInt($(li).css("left")) > -$(li).width()) {
      $(li).css({
        "left": parseInt($(li).css("left")) - 1 + "px",
        "display": "block"
      });
    } else {
      clearInterval(t);
      trans_width = ticker.width();
      li = $(li).next();
      if (li_count == li_length) {
        li_count = 1;
        li = $("li").first();
        runTicker(trans_width);
      } else if (li_count < li_length) {
        li_count++;
        setTimeout(function() {
          runTicker(trans_width);
        }, 500);
      }
    }
  }, 5);
}
$(ticker).hover(function() {
    clearInterval(t);
  },
  function() {
    runTicker(parseInt($(li).css("left")));
  });
runTicker(ticker.width());

#ticker {
  line-height: 1.8em;
  max-width: 600px;
  color: #000;
  overflow: hidden;
  min-height: 40px;
  height: auto;
}

.news-list {
  padding: 0;
  margin: 0;
  position: relative;
  list-style-type: none;
}

ul.news-list>li {
  position: absolute;
  white-space: nowrap;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="ticker">
  <ul class="news-list">
    <li>
      <p>My Paragraph<br/> with break.</p>
    </li>
    <li>
      <ul>
        <li>My Paragraph</li>
      </ul>
    </li>
    <li>"You've gotta dance like there's nobody watching, <br/> with break. Love like you'll never be hurt, <br/> with break. Sing like there's nobody listening, And live like it's heaven on earth<br/> with break." - <strong><i>William W. Purkey</i></strong></li>
  </ul>
</div>

样式新闻收录机以包含 Break 语句

Style News Ticker to include Break statement

html

javascript

css

jquery

news-ticker