<!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. [Practical Git] Filter commit history with git log arguments

    In the last lesson, we learned how to format the git log output; in this lesson we will learn how to ...

  2. 【问题汇总】ListView的FooterView设置可见性的问题

    ListView的FooterView一般用来给用户展示一些提示信息. 正常情况下,是这么使用的.代码例如以下: // footer footerLayout = new PullLoadingLay ...

  3. wcf-1

    1.WCF是什么? WindowsCommunication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,它是.NET框架的一部分,由.NET Framework 3. ...

  4. Android应用在不同版本间兼容性处理

    在Android系统中向下兼容性比较差,但是一个应用APP经过处理还是可以在各个版本间运行的.向下兼容性不好,不同版本的系统其API版本也不同,自然有些接口也不同,新的平台不能使用旧的API,旧的平台 ...

  5. interactive_timeout和wait_timeout(

    mysql> show variables like "%timeout%"; +-----------------------------+----------+ | Va ...

  6. ADO.Net的小知识（连接数据库）二

    上次提到数据库连接有两种形式断开式连接和打开式连接,断开式连接我已经讲解了,下面我来给大家讲解一下打开式连接 (1)引入命名空间:using System.Data.SqlClient; 该语句用于导 ...

  7. Apache中 RewriteRule 规则参数介绍

    Apache中 RewriteRule 规则参数介绍 摘要: Apache模块 mod_rewrite 提供了一个基于正则表达式分析器的重写引擎来实时重写URL请求.它支持每个完整规则可以拥有不限数量 ...

  8. 数据库通用Jdbc操作

    public class JdbcUtil { /** * 关闭一个数据库链接 * @param conn */ public static void closeConnection(Connecti ...

  9. VB.NET中使用代表对方法异步调用

    按照我们常规的思维方式,计算机应该是干完一件事,然后再干下一件.用术语来说,这种执行任务的方式叫做同步执行(Synchronous Execution).既然这样,那么为什么要引入异步执行的概念呢? ...

  10. docker on Mac

    贡献一篇: 云主机可以选择操作系统镜像快速创建主机,这比虚拟机更便捷了,我们本地也可以这么做了,因为有了 Docker 这个东西.它依赖于 LXC(Linux Container),能从网络上获得配置 ...