Question

我正在创建一个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>

Answer 1

请删除声明＆＃34; position:relative;＆＃34;来自班级＆＃34; .news-list ＆＃34;

＆＃13;

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());

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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());

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Style News Ticker包括Break声明

1 个答案: