我该如何解决这个JavaScript新闻水平报价？

Question

我的代码存在问题，似乎无法找到它。我的新闻股票不会滚动。任何人都可以帮我解决它。

我不想使用html seperate。我只想要一个完整的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(); 
}); 

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

如果你不需要什么特别，也许你可以使用<marquee>（docs）

Answer 2

你的问题是，你正在计算.ticker-container元件的尺寸存在之前它！

因此，将width变量向下移动下面insertAfter()。

您在生成的html中还有一对错字（class="ticker-container缺少一个引号，属性之间有额外的空间）。

这应该更好地工作：

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

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

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