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

<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. 转："在已损坏了程序内部状态的XXX.exe 中发生了缓冲区溢出"的一种可能原因

    我的问题跟原作者的问题差不多.头文件和DLL不匹配导致的. 原文链接:http://blog.csdn.net/u012494876/article/details/39030887 今天软件突然出现 ...

  2. 亚马逊如何变成 SOA（面向服务的架构）？

    阮一峰 日期: 2016年9月10日 上一篇文章,我摘录了<程序员的呐喊>.这本书有趣的内容太多,今天再摘录一段. 1. 亚马逊公司不仅是世界最大的网络书店,还是世界最大的云服务商.它是怎 ...

  3. VBA好的插件

    VBE 小插件--- Office 编程助手 :http://club.excelhome.net/thread-1055425-1-1.html VB以及VBA的编程助手MZ-tools7.0破解版 ...

  4. Android--Retrofit+RxJava（二）

    1,现在响应式编程也是越来越多在项目中使用了,刚好上篇我们简单了介绍了一下Retrofit,那么我们来开始试着两个一起用吧,不过不了解RxJava的同学可以先去看一看这个文章(挺好的):http:// ...

  5. Azure Table storage 之改进DynamicTableEntity类为其添加动态语言扩展

    在之前的一篇文章中提到,storage类库中包含一个可以用来动态获取Azure table storage 表结构的类-DynamicTableEntity. 我们可以通过这个类,我们无需为每一个表提 ...

  6. windows平台（不包括ARM的CE）通用的压缩和解压缩

    通用是相对的,这里指的是xp和win7(其他版本我没测试过,不要用不要来找我) #define CMP_FRM COMPRESSION_FORMAT_LZNT1|COMPRESSION_ENGINE_ ...

  7. Android中AIDL通信机制分析

    一.背景 ·1.AIDL出现的原因 在android系统中,每一个程序都是运行在自己的进程中,进程之间无法进行通讯,为了在Android平台,一个进程通常不能访问另一个进程的内存空间,所以要想对话,需 ...

  8. php之XML转数组函数的方法

    <?/** * xml2array() will convert the given XML text to an array in the XML structure. * Link: htt ...

  9. openvpn之搭建配置

    一.openvpn原理 openvpn通过使用公开密钥(非对称密钥,加密解密使用不同的key,一个称为Publice key,另外一个是Private key)对数据进行加密的.这种方式称为TLS加密 ...

  10. centos6.6编译安装lnmp系列之nginx

    简介: 环境:虚拟机+centos6.6 Cmake下载地址:http://www.cmake.org/files/v3.0/cmake-3.0.2.tar.gz Nginx 下载地址: http:/ ...