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

<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. 游戏制作之路：游戏引擎选择、Mac下和Windows下UnrealEngine 4体验对比、文档及其他

    UnrealEngine 4和Unity3d的选择 订阅了UrealEngine4(UE4)开发者.我开始做网站用的是ASP.NET和C#,之后做网站虽然换用更方便的PHP(因为做的都是小网站).我想 ...

  2. TCP/IP详解--连接状态变迁图CLOSE_WAIT

    终止一个连接要经过4次握手.这由TCP的半关闭(half-close)造成的.既然一个TCP连接是全双工(即数据在两个方向上能同时传递,可理解为两个方向相反的独立通道),因此每个方向必须单独地进行关闭 ...

  3. 再叙TIME_WAIT

    之所以起这样一个题目是因为很久以前我曾经写过一篇介绍TIME_WAIT的文章,不过当时基本属于浅尝辄止,并没深入说明问题的来龙去脉,碰巧这段时间反复被别人问到相关的问题,让我觉得有必要全面总结一下,以 ...

  4. Winform 进程、线程、treeview

    进程:一个程序就是一个进程,但是也有一个程序需要多个进程来支持的情况 进程要使用的类是:Process它在命名空间:System.Diagnostics; 静态方法Start();也可以实例化对象,来 ...

  5. RelativeLayout实现左中右布局

    <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_co ...

  6. js解析php数组

    <script language="javascript"> var str; //$file = 'config/config.xml'; str = '<?p ...

  7. js onmouseleave

    onmouseleave  no  propagation onmouseout   will  propagation

  8. Using MSBuild to publish a VS 2012 SSDT .sqlproj database project

    http://blog.danskingdom.com/using-msbuild-to-publish-a-vs-2012-ssdt-sqlproj-database-project-the-sam ...

  9. shell 显示字体颜色

    (2).颜色语法:     \033[前景色;背景色m     \033[0m                   #0m代表恢复到系统默认的颜色   (3).字符界面前景颜色与背景颜色:     前 ...

  10. UBI系统原理-中【转】

    转自:http://blog.chinaunix.net/uid-28236237-id-4217118.html UBI 文件头位置 EC头都放置在擦除块的开始偏移位置,占用64字节空间.之后防止V ...