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）

Answer 2

您的问题是您在.ticker-container元素存在之前计算其尺寸！

所以将width变量向下移到 insertAfter()下。

你生成的html中也有一些拼写错误（class="ticker-container缺少引号，属性之间有额外的空格。）

这应该更好：

＆＃13;

$(document).ready(function(e) {
  function tick() {
    if (--left < -width) {
      left = containerwidth;
    }
    console.log(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');

  // calculate dimensions here now the elements exist!
  var width = $('.ticker-text').width(),
    containerwidth = $('.ticker-container').width(),
    left = containerwidth;

  tick();
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header-userinfo"></div>

＆＃13;

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

2 个答案: