不错的而且是免费的跑马灯控件 -- jScroller

相信大家见过，写过也用过很多的跑马灯了。我个人比较喜欢jQuery，而jQuery中各种各样的跑马灯不知道有多少个，反正被jQuery官方站点收录的就有很多。今天介绍的这个是个人觉得比较不错的，所以在这边分享一下。

 

首先jScroller它是跨浏览器的，可以在各类浏览器在使用，而且它符合W3C规范，它不是使用maquee标签的。现在jScroller又 有一个新版jScroller2，两者的功能相似，最大区别在于前者需要jQuery库的支持，而后者是独立的，所以如果你没有使用jQuery库的话就 应该选用jScroller2版本。

 

jScroller的下载：http://jscroller.markusbordihn.de/download/

独立版本(jScroller2)的下载：http://jscroller2.markusbordihn.de/download/

 

下面简单介绍jScroller版的使用方法：

1、安装

安装是很简单只需要包含jquery的js文件和jScroller的文件，如：

 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jscroller.js"></script>

2、插入html代码
     <div id="scroller_container">
      <div id="scroller">
       ...
      </div>
     </div>
  

3、插入CSS代码

/* Scroller Box */ #scroller_container { position: relative; width: 120px; height: 200px; overflow: hidden; } #scroller p { padding: 0; } /* Scoller Box */

4、插入下列js代码，对jScroller进行设置

this.defaults = { scroller: { interval: 0, refresh: 100, // Refresh Time in ms direction: "down", // down,right,left,up speed: 1, id: "#scroller", cont_id: "#scroller_container", ... } }

看看效果：http://jscroller.markusbordihn.de/example/down/

 

简单解释一下jScroller可你可以设置的这些参数：

interval: 0 - 这个参数不要去碰
refresh: 200 - s每200ms转一次
direction: "down" - 设置旋转方向，可以是up,down,left,right
speed: 1 - 设置应该旋转多少像素
id: - Scroller DIV内部的内容div的id
cont_id: - Scroller Div的ID。
... - 不要碰

 

你可以根据自己的需要进行配置。就这么简单，几分钟就可以搞定一个跑马灯，试试吧。