javascript - 我该如何修复这个 javascript 新闻水平自动收报机？

Question

我的代码有问题，似乎无法找到它。我的新闻滚动条不会滚动。谁能帮我解决这个问题。

我不想单独使用 html。我只想要一个完整的 javascript 代码。

var width = $('.ticker-text').width(),
  containerwidth = $('.ticker-container').width(),
  left = containerwidth;
$(document).ready(function(e) {
  function tick() {
    if (--left < -width) {
      left = containerwidth;
    }
    $(".ticker-text").css("margin-left", left + "px");
    setTimeout(tick, 16);
  } {
    var $markup = $('<div id="clientip"><div class = "ticker-container><div class = "ticker-text">start text text text text</div></div></div>');
    $markup.insertAfter('#header-userinfo');
  }
  tick();
});

CSS 代码:

#clientip {
    float: left;
    margin-right: 25px;
    margin-top: 12px;
    position: relative;
    vertical-align: middle;
}
.ticker-container {
    width: 100%;
    height: 2.9%;
    border: 1px solid;
    overflow: hidden;
}
.ticker-text {
    height: 150%;
    white-space:nowrap;
    display:inline-block;
}

Answer 1

您正在尝试获取 .ticker-text 的宽度和 .ticker-container在脚本的开头，但之后插入它们。如果您稍微重新组织一下代码，它应该可以工作。

$(document).ready(function(e){
    // insertAfter returns the jQuery object.
    var $markup = $('<div id="clientip"><div class = "ticker-container><div class = "ticker-text">start text text text text</div></div></div>').insertAfter('#header-userinfo'),
        $tickerText = $(".ticker-text"),
        width = $tickerText.width(),
        containerwidth = $('.ticker-container').width(),
        left = containerwidth;

    function tick() {
        if(--left < -width){
            left = containerwidth;
        }
        $tickerText.css("margin-left", left + "px");
        setTimeout(tick, 16);
    }

    tick();
});

这是未经测试的。我还为代码文本 dom 对象创建了一个变量，以防止在每一帧上查询 dom。

如果你不需要什么特别的东西，也许你可以使用<marquee> ( docs )