<!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. php关于日期时间 php日期 php时间

    strtotime 的牛逼用法: $a='-4 days '.date('Y-m-d');$day = date('Y-m-d', strtotime($a));var_dump($day); /** ...

  2. 分享原创可复用且非侵入性代码生成工具(for .net)

    入行IT十年了,这是本人第一次网上’献丑‘.迫于工作压力,花了大半年时间写了这个生成器以辅助开发.如有价值请多多给予建议,谢谢 好了,废话少说,开动! QA. 1.为什么要用代码生成器? 当然是为了快 ...

  3. Android之UI--重绘EditText以及实现Button的渐变色

    在本文中实现的是比较普遍的一个对EditText的重绘以及对于按钮或窗口添加渐变色. 因为EditText是继承于TextView的,所以可以实现对EditText的重绘,在重绘的时候只需要继承Edi ...

  4. 不使用Math.random实现随机数。

    var rand = (function(){ var today = new Date(); var seed = today.getTime(); function rnd(){ seed = ( ...

  5. 【原】Spring与MongoDB集成：配置

    MongoDB的API提供了DBObject接口来实现BSONObject的操作方法,BasicDBObject是具体实现.但是并没有提供DBObject与BeanObject的转换.在还没有了解到与 ...

  6. Xilinx 网站资源导读2

    Xilinx 网站资源导读 ———版权声明———–本文作者 Ricky Suwww.fpganotes.comrickysu.fpga@gmail.com 欢迎转载,转载请保持原样及署名商业使用须得到 ...

  7. angularjs的一些优化小技巧

    尽可能少调用 ng-repeat ng-repeat默认会创建很多监听器,所以在数据量很大的时候,这个非常消耗页面性能,我觉的只有在当需要经常更新数据列表的时候才需要用ng-repeat,要不然放那么 ...

  8. R cannot be resolved to a variable 解决办法

    Android开发过程中,碰到R cannot be resolved to a variable的报错信息,好像没有很确定的错误原因,一般来说,我总结出几个可能的解决方法,希望试过以后管用... 1 ...

  9. 一个类似repo的小程序

    #! /usr/bin/env python # -*- coding: utf-8 -*- # usage : python EasyRepo.py -u "13051041" ...

  10. 动易标签函数position（） 应用

    Position()返回当前正在被处理的节点的 index 位置.例子://book[position()<=3].结果:选择前三个 book 元素当然在动易标签中,我们不需要这样用,因为用sq ...