转载

Newsticker-兼容IE8的jQuery滚动新闻插件

简要教程

jquery-newsticker是一款简单实用的jQuery滚动新闻(news ticker)插件。该滚动新闻插件使用简单,可以设置新闻滚动的速度,时间,动画函数等,并且可以兼容IE8浏览器。

Newsticker-兼容IE8的jQuery滚动新闻插件

查看演示      下载插件

使用方法

使用该滚动新闻插件需要引入jQuery1.8.2+、jquery.newsticker.js和jquery.newsticker.css文件。

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

HTML结构

该滚动新闻采用无序列表的HTML结构,每一个列表项是一条新闻。

<div class="newsticker">     <ul class="newsticker-list">         <li class="newsticker-item">             That open was light...         </li>         <li class="newsticker-item">             That creature his bring waters...         </li>         <li class="newsticker-item">             And also. Firmament and Give....         </li>     </ul> </div>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该滚动新闻插件。

$(function() {     $('.newsticker').newsticker(); });

配置参数

该滚动新闻插件有如下一些可用的配置参数:

  • height:newsticker的高度。
  • speed:动画的速度,单位毫秒。
  • start:文本的开始位置。
  • interval:两个文本显示之间的时间间隔,单位毫秒。
  • move:自定义动画函数。

来源:jQuery之家

正文到此结束
Loading...