0

我正在创建一个 List 新闻代码，并在此链接上找到了一个简单的实现： 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>

4

1 回答 1

1

position:relative;请从类“ .news-list ”中删除语句“ ”

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>

于 2017-08-09T09:40:08.973 回答