时间戳

首页 > 解决方案 > 从右到左创建新闻行情消息

javascript - 从右到左创建新闻行情消息

问题描述

我试图扭转这个 codepen 的方向，但没有成功。

希望制作一个从左到右的 HTML jQuery Ticker 消息。

这是我要反转的代码笔：

https://codepen.io/haydmills/pen/jEZzdW

这没有用：

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-right", left + "px");
        setTimeout(tick, 8);
      }
      tick();
});

标签： javascripthtmljquerycss

解决方案

它接缝工作正常！

var width, containerwidth, left, way = 0;

$(document).ready(function(e){

  width = $('.ticker-text').width();
  containerwidth = $('.ticker-container').width();
  left = containerwidth;

  tick();
});

function tick() {
  
  if (way) {    
    if (--left < -width){
      left = containerwidth;
    }
  } else {
    if (++left > containerwidth){
      left = -width;
     }
  }

  $(".ticker-text").css("margin-left", left + "px");
  setTimeout(tick, 8);
}

function toggle () {
  way = (way+1)%2;
}
body{
  margin: 0 auto;
}
.ticker-container {
  background: tomato;
    width: 100%;
    overflow: hidden;
  margin: 0 auto;
}
.ticker-text {
    height: 150%;
  color: #fafafa;
  white-space:nowrap;
  display:inline-block;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class = "ticker-container">
    <div class = "ticker-text">
    <h3>Hello! Welcome to my website.</h3>
    </div>
</div>
<button onclick="toggle();">Change direction</button>

推荐阅读