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文件进行自定义。
版权声明
文章来源: https://www.uihtm.com/jquery/9021.html
版权说明:仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。我们非常重视版权问题,如有侵权请邮件(44784009#qq.com)与我们联系处理。敬请谅解!


                    



















