从网络上找到的例子，自己做了下扩展，原示例是向上滚动，扩展了一个向下滚动的方法：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>滚屏实验</title>

<style type="text/css">

ul,li{margin:;padding:}

#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}

#scrollDiv li{height:25px;padding-left:10px;}

</style>

    <script src="js/jquery-1.4.1.js"></script>

<script type="text/javascript">

    (function ($) {

        $.fn.extend({

            Scroll: function (opt, callback) {

                //参数初始化

                if (!opt) var opt = {};

                var _this = this.eq().find("ul:first");

                var lineH = _this.find("li:first").height(), //获取行高

                        line = opt.line ? parseInt(opt.line, ) : parseInt(this.height() / lineH, ), //每次滚动的行数，默认为一屏，即父容器高度

                        speed = opt.speed ? parseInt(opt.speed, ) : , //卷动速度，数值越大，速度越慢（毫秒）

                        timer = opt.timer ? parseInt(opt.timer, ) : ; //滚动的时间间隔（毫秒）

                if (line == ) line = ;

                var upHeight =  - line * lineH;

                var downHeight=line * lineH - ;

                //滚动函数

                scrollUp = function () {

                    _this.animate(

                        { marginTop: upHeight },

                        speed,

                        function () {

                            for (i = ; i <= line; i++) {

                                _this.find("li:first").appendTo(_this);

                            }

                            _this.css({ marginTop:  });

                        }

                    );

                },

                //向下滚动函数

                scrollDown = function () {

                    _this.animate(

                        { marginTop: downHeight },//动画展示css样式

                        speed,

                        function () {

                            _this.find("li:last").prependTo(_this);

                            _this.css({ marginTop:  });

                        }

                        )

                }

                var timerID

                //鼠标事件绑定

                _this.hover(function () {

                    clearInterval(timerID);

                }, function () {

                    timerID = setInterval("scrollDown()", timer);//这里调用向下或者向上滚动函数

                }).mouseout();

            }

        })

    })(jQuery);

    $(document).ready(function () {

        $("#scrollDiv").Scroll({ line: , speed: , timer:  });

    });

</script>

</head>

<body>

<p>多行滚动演示：</p>

<div id="scrollDiv">

  <ul>

    <li>这是公告标题的第1行</li>

    <li>这是公告标题的第2行</li>

    <li>这是公告标题的第3行</li>

    <li>这是公告标题的第4行</li>

    <li>这是公告标题的第5行</li>

    <li>这是公告标题的第6行</li>

    <li>这是公告标题的第7行</li>

    <li>这是公告标题的第8行</li>

  </ul>

</div>

</body>

</html>

jquery实现自动滚屏效果，适用用公告新闻等滚屏的更多相关文章

  1. 帆软报表（finereport）实现自动滚屏效果

    例如Demo:IOS平台年度数据报表. 展示内容丰富,一个页面中存在多个图表.内容,超出了浏览器窗口的大小导致内容展示不全. 为了能够预览这个报表的全部内容,可以使用JS滚屏效果来实现. 操作步骤: ...

  2. FineReport中如何实现自动滚屏效果

    对于一些特殊的模板,可能为了展示的更加丰富.全面会在一个页面放置很多图表.表格等内容.由于内容过多,超出了浏览器窗口的大小导致内容展示不全的情况.这样我们就需要用到JS滚屏效果来解决,这里主要介绍在F ...

  3. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  4. 用JQ仿造百度书籍预售页面的单屏滚页效果

    今天的项目需要做到一个介绍页面,我主动提出走单屏滚页的风格,毕竟交互性好,逼格也高,具体效果可以参照百度知道书籍预售页面. 其实现效果就大概是这样的: 还是老样子,所有步骤文件可以从我的Github上 ...

  5. jquery实现整屏翻屏效果：jquery.mousewheel（一）

    实现整屏上下翻效果:需加载的js <script type="text/javascript" src="js/jquery-1.8.3.min.js"& ...

  6. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

  7. 利用jquery.touchSwipe.js实现的移动滑屏效果。

    利用jquery.touchSwipe.js实现的移动滑屏效果. 亲测:兼容ie8及各种浏览器 <script type="text/javascript" src=&quo ...

  8. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  9. 一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

    一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件 在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> ...

随机推荐

  1. Array基本操作

    // defined array object val arr0= ) val arr1= Array(") println(arr1()) arr1()="Hello Spark ...

  2. numpy——linspace创建等差数列

    numpy.linspace(start, stop, num=50, endpoint=True, retstep=False, dtype=None) a=np.linspace(1000,320 ...

  3. curl提交数据时中文乱码

    1.使用curl提交数据时中文乱码解决: <?php $testJSON=array('name'=>'中文字符串','value'=>'test'); foreach ( $tes ...

  4. Egret官方案例学习笔记

    1.资源记载方式 (1)Egret引擎是2.0.5. (2)resource/resource.json文件是: { "resources": [ { "name&quo ...

  5. CSS3 笔记一（Rounded Corners/Border Images/Backgrounds）

    CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border- ...

  6. Shadow Zhang PGPool 配置错误定位 s_do_auth: expecting R got E

    自从按照教程 http://www.pgpool.net/docs/latest/pgpool-zh_cn.html#hba配置好PGPool以后,每次启动 pgpool -c -n -D 都报 s_ ...

  7. 初识Python第二天（1）

    在Python中,一切事物都是对象,对象是基于类创建的,对象继承了类的属性,方法等. 一.传递参数 1.1新建python文件,名为twoday_args.py,输出以下代码 import sys p ...

  8. CentOS7安装mysql5.6.26

    linux系统CentOS7 到http://mirrors.sohu.com/mysql/下载想要的mysql版本 这里用到的是 mysql-5.6.26-linux-glibc2.5-x86_64 ...

  9. noi 9265 取数游戏

    题目链接:http://noi.openjudge.cn/ch0206/9265/ 题意:从自然数1到N中不取相邻2数地取走任意个数,问方案数. 解法:f[i][1]表示在前i个数中选了第i个的方案数 ...

  10. HTTP抓包神器HTTP Analyzer V7 Build7.5.4汉化+注册机

    原版安装包.汉化文件.注册机下载:http://pan.baidu.com/s/1bMv1Si 密码:cqq1 一.安装:下载并安装英文原版  下载页面:http://www.ieinspector. ...