使用任何东西创建选框？ Javascript，Jquery，CSS

Question

我正在尝试使用HTML和CSS构建博客。现在，我已经使用PHP为某些股票集成了API，并使用我创建了多个小部件的数据。

现在我正试图创建一个类似于股票市场的大帐篷（无穷无尽且没有任何差距）。我找到了一些例子，但未能理解它的实现。

任何人都可以告诉大家这样的功能在这些网站中是如何运作的

1. https://nse.com/（位于网站顶部）
2. https://www.gdax.com/
＆＃13;
＆＃13;
$('document').ready(function(){
    refreshData();
})

function refreshData() {
    $('#container-table').load("data.php", function(){
        setTimeout(refreshData, 10000);
    });

    $('#container-tablel').load("datanike.php", function(){
        setTimeout(refreshData, 10000);
    });

    $('#container-tabled').load("datamsft.php", function(){
        setTimeout(refreshData, 10000);
    });

    $('#container-tablee').load("dataaapple.php", function(){
        setTimeout(refreshData, 10000);
    });

    $('#container-tablex').load("dataamzn.php", function(){
        setTimeout(refreshData, 10000);
    });
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
    <div id="container-table"></div>
    <div id="container-tablel"></div>
    <div id="container-tabled"></div>
    <div id="container-tablee"></div>
    <div id="container-tablex"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

我想像GDAX中那样实现这些。但是，任何其他实现也将受到高度赞赏。

提前致谢。

Answer 1

您可以使用简单的html＆lt; 字幕＆gt;无限移动的标签。

参见示例：

＆＃13;

＆＃13;

#container-table, #container-tablel, #container-tabled, #container-tablee, #container-tablex {
    float: left;
    padding: 0 20px 0 0;
}

＆＃13;

<div class="container1">
  <marquee>
      <div id="container-table">test</div>
      <div id="container-tablel">test1</div>
      <div id="container-tabled">test2</div>
      <div id="container-tablee">test3</div>
      <div id="container-tablex">test4</div>
  </marquee>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

这是连续选框

// polyfill
window.requestAnimationFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var speed = 5000;
(function currencySlide(){
    var currencyPairWidth = $('.slideItem:first-child').outerWidth();
    $(".slideContainer").animate({marginLeft:-currencyPairWidth},speed, 'linear', function(){
                $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
        });
        requestAnimationFrame(currencySlide);
})();

.slider{
    width:100%;
    overflow:hidden;
    position:relative;
    margin:0;
}
.edge{
    left:0;
    right:0;
    top:0;
    bottom:0;
    position:absolute;
    height:100%;
    display:block;
}
.edge:before{
    content:'';
    position:absolute;
    left:0;
    background:-webkit-linear-gradient(left, white 10%, rgba(0,0,0,0) 100%);
    width:25%;
    height:100%;
}
.edge:after{
    content:'';
    position:absolute;
    right:0;
    background:-webkit-linear-gradient(right, white 10%, rgba(0,0,0,0) 100%);
    width:25%;
    height:100%;
}
ul{
    background:#ddd;
    overflow:hidden;
    width:1000%;
    margin:0;
}
li{
    list-style:none;
    display:inline-block;
    padding:0 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='slider'>
    <div class="edge"></div>
<ul class="slideContainer" id="money_start">
        <li class="slideItem" >
                EUR
        </li>
        <li class="slideItem">
                USD
        </li>
        <li class="slideItem">
                JPY
        </li>
        <li class="slideItem">
                CNY
        </li>
        <li class="slideItem">
                VD
        </li>
        <li class="slideItem">
                GBP
        </li>
        <li class="slideItem">
                AUD
        </li>
        <li class="slideItem">
                CAD
        </li>
        <li class="slideItem">
                CHF
        </li>
        <li class="slideItem">
                XAU
        </li>
</ul>
</div>

Answer 3

NSE网站正在使用custom-stock-ticker（A Word Press Plugin）。从那里开始的好地方是stock_ticker_script.js。