多行滚动jQuery循环新闻列表代码

时间：2022-12-26 08:44:20
<!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 项目 第二十二课 文章主页 新闻列表页面滚动加载，轮播图后台实现 &lpar;课堂笔记）

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

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

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

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

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

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

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

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

    <!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. SQL server同时删除多个表

    ) while exists (select name from sys.tables where name like 'se_%') begin @varname = name from sys.t ...

  2. POJ C&plus;&plus;程序设计 编程题＃4 字符串操作

    编程题#4: 字符串操作 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述 给 ...

  3. SQL合并时间段的问题

    假设表结构如下所示: Tsheets 字段名 字段类型 约束 id CHAR(10) PRIMARY KEY start_date DATE CHECK(start_date<= end_dat ...

  4. WCF与Web API 区别&lpar;应用场景&rpar;

    Web api  主要功能: 支持基于Http verb (GET, POST, PUT, DELETE)的CRUD (create, retrieve, update, delete)操作 请求的回 ...

  5. Java Vector 类

    Vector类实现了一个动态数组.和ArrayList和相似,但是两者是不同的: Vector是同步访问的. Vector包含了许多传统的方法,这些方法不属于集合框架. Vector主要用在事先不知道 ...

  6. 浅析ASP&period;NET的状态保持

    ASP.NET的状态保持:1.viewstate:隐藏域,记录服务器端控件的状态,适用于页面不关闭的情况下多次与服务器交互,页面自己给自己传值:文本框的改变事件.IspostBack也依赖viewst ...

  7. Tomcat7&period;0&period;22在Windows下详细配置过程

    Tomcat7.0.22在Windows下详细配置过程 一.JDK1.7安装 1.下载jdk,下载地址:http://www.oracle.com/technetwork/java/javase/do ...

  8. appium 判断app是否安装

    #coding:utf-8 #Import the common package import os import unittest from appium import webdriver from ...

  9. Forms Authentication and Role based Authorization&colon; A Quicker&comma; Simpler&comma; and Correct Approach

    https://www.codeproject.com/Articles/36836/Forms-Authentication-and-Role-based-Authorization Problem ...

  10. Android中pm命令用法&lpar;转&rpar;

    usage: pm [list|path|install|uninstall] pm list packages [-f] pm list permission-groups pm list perm ...

相关文章