<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

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

<title>多行滚动jQuery循环新闻列表代码</title>

<style type="text/css">

ul,li{margin:0;padding:0}

#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="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

//滚动插件

(function($){

$.fn.extend({

        Scroll:function(opt,callback){

                //参数初始化

                if(!opt) var opt={};

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

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

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

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

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

                if(line==0) line=1;

                var upHeight=0-line*lineH;

                //滚动函数

                scrollUp=function(){

                        _this.animate({

                                marginTop:upHeight

                        },speed,function(){

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

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

                                }

                                _this.css({marginTop:0});

                        });

                }

                //鼠标事件绑定

                _this.hover(function(){

                        clearInterval(timerID);

                },function(){

                        timerID=setInterval("scrollUp()",timer);

                }).mouseout();

        }

})

})(jQuery);

$(document).ready(function(){

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

});

</script>

</head>

<body>

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

<div id="scrollDiv">

  <ul>

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

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

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

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

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

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

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

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

  </ul>

</div>

</body>

</html>

***请再次刷新查看效果，或保存到本地浏览***

多行滚动jQuery循环新闻列表代码的更多相关文章

  1. React Native ：加载新闻列表

    代码地址如下:http://www.demodashi.com/demo/13212.html 标签与内容页联动 上一节(React Native : 自定义视图)做到了点击标签自动移动,还差跟下面的 ...

  2. JQuery实现页面企业广告图片切换和新闻列表滚动效果

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

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

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

  4. 潭州课堂25班：Ph201805201 django 项目 第二十二课 文章主页 新闻列表页面滚动加载，轮播图后台实现 (课堂笔记）

    新建static/js/news/index.js文件 ,主要用于向后台发送请求, // 新建static/js/news/index.js文件 $(function () { // 新闻列表功能 l ...

  5. js实现新闻滚动-单行滚动或者多行滚动

    注明:都是转载. 先说单行滚动: --------直接复制以下代码即可试验 转载http://www.3lian.com/edu/2011/06-30/4986.html----------- < ...

  6. js实现的新闻列表垂直滚动实现详解

    js实现的新闻列表垂直滚动实现详解:新闻列表垂直滚动效果在大量的网站都有应用,有点自然是不言而喻的,首先由于网页的空间有限,使用滚动代码可以使用最小的空间提供更多的信息量,还有让网页有了动态的效果,更 ...

  7. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery鼠标滚动垂直全屏切换代码

    体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...

随机推荐

  1. BugZilla的安装过程简明教程

    Bugzilla+Mysql+iis+perl模块+ ActivePerl 安装过程 (原:http://www.cnblogs.com/Warmsunshine/archive/2012/03/25 ...

  2. python--for循环

    1.循环输出1-10 for i in range(1,11): print(i) 1 2 3 4 5 6 7 8 9 10 2.break用法,break为跳出整个当前循环层,只跳一层.当i=5的时 ...

  3. 获取mp4文件信息

    计算电影长度 方法1 从mvhd - movie header atom中找到time scale和duration,duration除以time scale即是整部电影的长度. time scale ...

  4. MATLAB基础入门笔记

    为了参加那个电工杯,豁出去啦,时间真的很短,但是得挑战呀..对于MATLAB编程,有一些了解,MATLAB(矩阵实验室的简称)是一种专业的计算机程序,用于工程科学的矩阵数学运算,说说它的开发环境. 任 ...

  5. PHP 简易读取文件目录下的文件，生成css spirte图片

    因为个人不是对PS熟悉,不清楚如何在PS中生成一张横向有序的spirte图片,使用了"css sprite V4.3"版本,生成的图片会出现压缩图片大小的情况,本想修改原作者开发的 ...

  6. Dremel made simple with Parquet

    http://lastorder.me/tag/parquet.html https://blog.twitter.com/2013/dremel-made-simple-with-parquet 对 ...

  7. lookup：ID列

    对lookup列对应的ID列的引用的写法 if (item["NavType_x003a_ID"].ToString() == type["ID"].ToStr ...

  8. 让progressDialog不会触摸消失

    项目中的进度菊花圈,在网络请求的时候会出现,但是手一触碰到屏幕,就会消失,看了下自己的设置,给对话框设置了该方法: progressDialog.setCancelable(true); 点击Prog ...

  9. 关于ServletConfig的小结

         在Servlet的配置文件中,可以使用一个或多个<init-param>标签为servlet配置一些初始化参数.当servlet配置了初始化参数后,web容器在创建servlet ...

  10. 学习笔记1_Day09_Servlet

    生命周期方法: l  void init(ServletConfig):出生之后(1次): l  void service(ServletRequest request, ServletRespons ...