适合移动手机使用的jQuery响应式滚动新闻插件

Responsive-Ticker是一款适合移动手机使用的响应式jQuery滚动新闻插件。该插件通过简单的设置HTML代码即可生成全屏响应式的滚动新闻效果，它可以在移动手机和桌面设备上完美的工作。

使用方法

使用该jQuery滚动新闻插件需要引入jQuery和ticker.js、ticker.css文件。

<link rel="stylesheet" type="text/css" href="css/ticker.css">
<script src="js/jquery.min.js"></script>
<script src="js/ticker.js"></script>                
              

HTML结构

该jQuery滚动新闻插件的HTML结构如下：使用带.ticker-container class的div作为包裹元素，里面使用带.ticker-caption class的div元素作为滚动新闻的标题，所有的滚动新闻使用无序列表来制作。

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

通过上面的设置即可在页面上生成滚动新闻。其样式可以通过ticker.css文件进行自定义。