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

<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. [Android Tips] 16. Update Android SDK from command-line

    $ cd $ANROID_HOME $ tools/android update sdk -u -s 参数 -s --no-https : Uses HTTP instead of HTTPS (th ...

  2. stl 比较和boost LessThanComparable

    C++ STL的几种常用“比较”概念简述   在C++的现行标准(C++ 98)中,由于没有类似“接口”这样的东西,我们在泛型编程时往往只能对模板类型作一些假设,要求其符合某个需求清单,也就是属于某个 ...

  3. Leetcode: Largest BST Subtree

    Given a binary tree, find the largest subtree which is a Binary Search Tree (BST), where largest mea ...

  4. C/C++ 结构体 函数传递

    #include <stdio.h> #include <stdlib.h> struct student{ int num; ]; double dec; }; void s ...

  5. 0512 Scrum 4.0

    看板设计 每日例会时间定于下午放学回到宿舍,地点是在宿舍外的走廊或宿舍里,特殊情况待定: 团队开会照片 任务认领: 首页设计-------王俊杰 鸡汤版面-------列志华 论“汤”版面------ ...

  6. [CrunchBang]tint2默认设置

    #--------------------------------------------- # TINT2 CONFIG FILE #-------------------------------- ...

  7. 关于jquery-validate验证表单

    最近在做微信端的界面,一直写表单验证!一直在写表单验证!发现jquery-validate还真是好用哎,今天总结了一些: (1)required:true 必输字段(2)remote:"ch ...

  8. HTML随学随机

    1.2D坐标系由X轴个y轴构成.其中,笛卡尔坐标系是最常见的2D坐标系. 2.HTML5 canvas2D坐标系: (1)canvas坐标原点:左上角. (2)canvas的x与y轴方向: (I)x轴 ...

  9. 人工智能系统Google开源的TensorFlow官方文档中文版

    人工智能系统Google开源的TensorFlow官方文档中文版 2015年11月9日,Google发布人工智能系统TensorFlow并宣布开源,机器学习作为人工智能的一种类型,可以让软件根据大量的 ...

  10. ReactiveCocoa常见操作方法介绍/MVVM架构思想

      1.ReactiveCocoa常见操作方法介绍. 1.1 ReactiveCocoa操作须知 所有的信号(RACSignal)都可以进行操作处理,因为所有操作方法都定义在RACStream.h中, ...