如何解决此JavaScript新闻水平行情记录？

Question

There is a problem in my code and can't seem to find it. My news ticker won't scroll. Can anyone help me out to fix it.

I don't want to use html seperate. I just want a complete javascript code.

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

#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

You are trying to get the width of .ticker-text and .ticker-container at the beginning of your script, but insert them after that. If you reorganize the code a little it should work.

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

That's untested. I also created a variable for the ticker text dom object, to prevent querying the dom on each frame.

If you don't need anything special, maybe you can use <marquee> ( docs )

Answer 2

Your issue is that you are calculating the dimensions of your .ticker-container element before it exists!

So move the width variables down underneath the insertAfter() .

You also have a couple of typos in the generated html ( class="ticker-container missing a quote, extra space between attributes).

This should work better:

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