jQuery

【jQuery】レスポンシブ対応ティッカープラグインResponsive-Ticker

June 20, 2017
resposive ticker

【jQuery】これは使えるかも!お知らせを流すティッカープラグイン10選でご紹介したResponsive-Ticker。Responsive-TickerはHTML5、CSS3、JavaScriptやjQu​​eryを使用したレスポンシブティッカープラグイン。

CSS

<link rel="stylesheet" type="text/css" href="ticker.css">

HTML

<div class="ticker-container">
  <div class="ticker-caption">
    <p>Responsive Ticker</p>
  </div>
  <ul>
    <div><li><span>Ticker element 1 &ndash; <a href="#">read more</a></span></li></div>
    <div><li><span>Ticker element 2 &ndash; <a href="#">read more</a></span></li></div>
    <div><li><span>Ticker element 3 &ndash; <a href="#">read more</a></span></li></div>
    <div><li><span>Ticker element 4 &ndash; <a href="#">read more</a></span></li></li></div>
    <div><li><span>Ticker element 5 &ndash; <a href="#">read more</a></span></li></li></div>
  </ul>
</div>

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="ticker.js"></script>