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

<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. 一些常见maven仓库

    <repositories> <repository> <id>spring-releases</id> <url>https://repo ...

  2. 时光煮雨 Unity3D让物体动起来③—UGUI DoTween&Unity Native2D实现

    本文首发蛮牛,次发博客园.接系列 第一篇,第二篇,本文为第三篇,再次感谢“武装三藏”在前两篇无私且精彩的问题解答 写在最前,时光煮雨,为了怀念 以下引用曾今读过的一些教程文章 其实这3种动画都有它特定 ...

  3. nmap使用教程

    Nmap是一款开源免费的网络发现(Network Discovery)和安全审计(Security Auditing)工具.软件名字Nmap是Network Mapper的简称.Nmap最初是由Fyo ...

  4. 各大Oj平台介绍 刷题平台

    https://leetcode.com/ http://www.cnblogs.com/lzmfywz/archive/2012/02/07/2342010.html 1.题库与网站资源题库-在线提 ...

  5. Mac 使用笔记

    说来惭愧,入手Mac已经快大半年了,但使用上一直是菜鸟. 下面是最近学习和用到的技巧,纪录如下,以后会不定期更新. 开启多个Terminal,这个简直是调程序必备. Command+N 打开新的Ter ...

  6. SQL Server 利用批量(batchsize)提交加快数据生成/导入

    在最小化日志操作解析,应用的文章中有朋友反映生成测试数据较慢.在此跟大家分享一个简单的应用,在生成数据过程中采用批量提交的方式以加快数据导入. 此应用不光生成测试数据上,在BCP导入数据中,复制初始化 ...

  7. 通过Trainingkit对Azure有一个初步的了解

    学习Azure有一个非常不错的资料库Azure training kit. 这里面包含了很多Azure团队编写的实例代码,以及为初学Azure的开发人员准备的新手教学课程. 开发人员可以从http:/ ...

  8. JS逗号运算符的用法详解

    逗号运算符的用法详解 注意: 一.由于目前正在功读JavaScript技术,所以这里拿JavaScript为例.你可以自己在PHP中试试. 二.JavaScript语法比较复杂,因此拿JavaScri ...

  9. innodb的表最大限制

    相信大多数人都不知道,innodb的表最大限制为64TB,但是why? Each space is divided into pages, normally 16 kib each (this can ...

  10. 为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...