<!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. ios十进制、十六进制字符串，byte，data等之间的转换

    十进制->十六进制 Byte bytes[]={0xA6,0x27,0x0A}; NSString *strIdL  = [NSStringstringWithFormat:@"%@& ...

  2. hdu4081 次小生成树变形

    pid=4081">http://acm.hdu.edu.cn/showproblem.php?pid=4081 Problem Description During the Warr ...

  3. [Effective C++ --019]设计class犹如设计type

    前言 我们在编写程序的时候,无论哪一种语言,总是会告诉你这种语言应该有的类型.我们将它们直接拿来使用,可是从来没有考虑过这些类到底是怎么设计出来的! 所幸的是:在OOP中,每当我们定义一个新的clas ...

  4. [001]socket通信--server和client实现迭代的简单例子

    server端: #include<stdio.h> #include<stdlib.h> #include<string.h> #include<unist ...

  5. DataGridView实现倒计时功能（源码）

    需求:最近做一个即时通项目,需要结合OA项目:其中有一个待办事项需要倒计时,准备在DataGridView里展示,如图: 第一步:绑定数据 ; intLoop <= ; intLoop++) { ...

  6. cocos2dx 公告效果

    第一种方法: http://blog.csdn.net/jackystudio/article/details/12991977 [玩转cocos2d-x之十六]滚动字幕和公告 第二种方法: http ...

  7. 如何在ios手机端的Safari浏览器 中“查看网页源代码”

    在这里给大家分享一个很简单的用苹果手机无需越狱就可以查看网页源代码的方法,不过这个方法只用于苹果手机自带的Safari浏览器 随便添加一个safari 书签 (用于一会改为查看源码功能书签)进入书签 ...

  8. zTree默认选中指定节点并执行事件

    var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var node = treeObj.getNodeByParam(" ...

  9. C#总结1

    C#摘要 第一章: 数据类型: 在定义变量的时候,记下规则,开头不能是数字,变量名只能包括 字母 “_” 数字 整型类型 名称 CTS类型 说明 范围 sbyte System.SByte 8位有符号 ...

  10. UVA - 213 Message Decoding （输入字符串并对单个字符进行操作的输入输出）

    POINT: 关于表示一个编码:利用code字符数组表示一个编码字符,其中code[len][val]表示长度为len,二进制值为val的字符: 主程序如下: #include <iostrea ...