jquery滚动特效集锦

jquery单行滚动、批量多行滚动、文字图片翻屏滚动效果代码，需要的朋友可以参考下。

以下代码，运行后，需要刷新下，才能加载jquery,要不然看不到效果。

一、单行滚动效果

ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}







百度 www.baidu.com
考高分网 www.jb51.net
这是公告标题的第三行
这是公告标题的第四行
这是公告标题的第五行
这是公告标题的第六行
这是公告标题的第七行
这是公告标题的第八行

二,多行滚动效果

ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}





多行滚动演示：


百度 www.baidu.com
考高分网 www.jb51.net
这是公告标题的第三行
这是公告标题的第四行
这是公告标题的第五行
这是公告标题的第六行
这是公告标题的第七行
这是公告标题的第八行

三、可控制向前向后的多行滚动

ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}





多行滚动演示：


这是公告标题的第一行
这是公告标题的第二行
这是公告标题的第三行
这是公告标题的第四行
这是公告标题的第五行
这是公告标题的第六行
这是公告标题的第七行
这是公告标题的第八行


向前 向后

以上所述就是本文的全部内容了，希望大家能够喜欢。