autoRoll_UpDown函数

 function autoRoll_UpDown($domObj,speed){  //$domObj 外围容器的jQuery式元素对象   speed 滚动速度，单位毫秒

    var speed = speed || 3000;   //默认速度3秒

    var len = $domObj.children().length;

    var chiH = $domObj.children().height();

    if(len>1){

        $domObj.append($domObj.html());

        var pointRoll = 0;

        function move(){

            pointRoll++;

            if(pointRoll > len){

                pointRoll = 1;

                $domObj.css('top','0px');

            }

            $domObj.animate({top:-chiH*pointRoll+"px"});

        }

        var time = setInterval(move,speed)

        $domObj.hover(function(){

            clearInterval(time);

        },function(){

            time = setInterval(move,speed)

        })

    }

}

下边是一个已经跑通的demo

<html>

<head>

<title>（demo）自动-无缝-上下滚动</title>

<script type="text/javascript" src="http://i.tq121.com.cn/j/jquery-1.8.2.js"></script>

<link type="text/css" rel="stylesheet" href="http://i.tq121.com.cn/c/core.css">

</head>

<body>

<style>

*{padding:0; margin:0;}

div{ margin:100px;height:50px;width:200px; overflow:hidden; position:relative; }

ul{ position:absolute; top:0; left:0; width:100px;}

ul li{ height:50px; width:200px; text-align:center; line-height:50px;color:#fff; cursor:pointer;}

</style>

<div>

    <ul>

        <li style="background:red;">11</li>

        <li style="background:blue;">22</li>

    </ul>

</div>

<script>

var $U = $('ul');

//autoRoll_UpDown($U); //默认滚动速度3秒

autoRoll_UpDown($U,1000);  //设置滚动速度 1秒

function autoRoll_UpDown($domObj,speed){

    var speed = speed || 3000;   //默认速度3秒

    var len = $domObj.children().length;

    var chiH = $domObj.children().height();

    if(len>1){

        $domObj.append($domObj.html());

        var pointRoll = 0;

        function move(){

            pointRoll++;

            if(pointRoll > len){

                pointRoll = 1;

                $domObj.css('top','0px');

            }

            $domObj.animate({top:-chiH*pointRoll+"px"});

        }

        var time = setInterval(move,speed)

        $domObj.hover(function(){

            clearInterval(time);

        },function(){

            time = setInterval(move,speed)

        })

    }

}

</script>

</body>

</html>

autoRoll_UpDown()|上下滚动函数|无缝|自动（自带demo）的更多相关文章

  1. 今天代码中接触到了一个新的东西。js的上下自动滚动，无缝对接。

    js的上下自动滚动,无缝对接.为什么会用到这个东西呢?因为我在做公司的官网项目的修改的时候.有一个产品介绍的页面,会有很多的产品出现在,中间部分的列表里.但是又不能够使用分页.所以我就在想如果,列表数 ...

  2. [C#] 了解过入口函数 Main() 吗？带你用批处理玩转 Main 函数

    了解过入口函数 Main() 吗?带你用批处理玩转 Main 函数 目录 简介 特点 方法的参数 方法的返回值 与批处理交互的一个示例 简介 我们知道,新建一个控制台应用程序的时候,IDE 会同时创建 ...

  3. 页面滚动到底部自动 Ajax 获取文章

    页面滚动到底部自动 Ajax 获取文章  代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) {    if (_time ...

  4. T4 模板自动生成带注释的实体类文件

    T4 模板自动生成带注释的实体类文件 - 只需要一个 SqlSugar.dll 生成实体就是这么简单,只要建一个T4文件和 文件夹里面放一个DLL. 使用T4模板教程 步骤1 创建T4模板 如果你没有 ...

  5. Visual C++ 编译器自动假定带 .C 扩展名的文件是 C 文件而不是 C++ 文件，并且拒绝 C++ 语法和关键字（c语言只能在大括号最前面申明变量）

    今天在编译OpenGL红宝书附带源码中的light.c文件时遇到一个诡异的问题: 如图light .c,在不做任何修改的情况编译OK.然而只要在某些地方写了可执行代码,则会无法通过编译器编译! (这几 ...

  6. TCL函数“参数自动补全” 与 “help 信息显示”

    tcl 函数参数自动补全和 help 信息显示 在EDA tool 中使用命令时,命令的参数可以通过 tab 键自动补全,而且可以使用 -help 显示帮助信息,使用起来很方便: 那么我们自己编写的 ...

  7. C#实现为类和函数代码自动添加版权注释信息的方法

    这篇文章主要介绍了C#实现为类和函数代码自动添加版权注释信息的方法,主要涉及安装文件的修改及函数注释模板的修改,需要的朋友可以参考下   本文实例讲述了C#实现为类和函数代码自动添加版权注释信息的方法 ...

  8. VS 自动创建带增删查改的MVC网站

    VS 自动创建带增删查改的MVC网站 MVC.Net教程   废话放在前头,说一下这个文章的缘起某天某妹纸找我,说这个MVC的创建不太会,要记一下controllers.models.还有页面引用的东 ...

  9. Jquery中数组转字符串,c:foreach自动将带","字符串进行拆分赋值

    1.数组转字符串,逗号分割 a.push()将元素依次添加至数组: b.join()将数组转换成字符串,里面可以带参数分隔符,默认[,] <script type = text/javascri ...

随机推荐

  1. windowsServer-------- 系统中调出文件扩展名

    Windows Server是微软发布的一系列服务器操作系统的品牌名. 各个品牌的发布日期 Windows Server 2003 (2003年4月) Windows Server 2003 R2(2 ...

  2. Spring BeanFactory继承结构图

    结构图 高清大图:https://img2018.cnblogs.com/blog/813478/201910/813478-20191030114422275-1092084932.jpg 源文件( ...

  3. Linux 常用文件描述

    Linux 常用文件描述 /etc/issue 本地登陆显示的信息,本地登录前 /etc/issue.net 网络登陆显示的信息,登录后显示,需要由sshd配置 /etc/motd 常用于通告信息,如 ...

  4. Replication：事务复制 Transaction and Command

    事务复制使用 dbo.msrepl_transactions 和 dbo.MSrepl_commands 存储用于数据同步的Transaction和Command.在replication中,每个co ...

  5. [Linux] - 服务器/VPS一键检测带宽、CPU、内存、负载、IO读写

    一.SuperBench.sh VPS/服务器一键检测带宽.CPU.内存.负载.IO读写等的脚本: wget -qO- https://raw.githubusercontent.com/oooldk ...

  6. Python的object和type理解及主要对象层次结构

    一.Object与Type 1.摘自Python Documentation 3.5.2的解释 Objects are Python’s abstraction for data. All data ...

  7. FreePascal - CodeTyphon 如何调整代码编辑器背景色？

    当前版本的CodeTyphon默认背景色是黑色,看起来很不习惯,通过下面操作,修改了它的代码编辑器的背景色: 1,打开CodeTyphon的菜单“工具”->“选项”. 2,选择左侧列表项目“颜色 ...

  8. Windows 10 下 GCC / LLVM 的安装和使用

    win10下gcc的安装和makehttps://www.jianshu.com/p/46824c62dfed 方案1:直接官方下载安装minGw或Cygwininstall download: ht ...

  9. springboot如何读取配置文件中的参数（例如：application-consts.properties） 又结合maven读取配置文件的顺序

    1.启动项目后,会读取pom.xml中的配置文件,例如现在读取的是本地配置 2.找到对应的配置文件  会读取uri地址下的配置.注:如果为springboot启动无需加config项目的名称,应该本身 ...

  10. RxJS——订阅（Subscription）

    订阅(Subscription) 什么是订阅?订阅是一个对象,它表示一个处理完就释放(disposable)的资源,是 Observable 的一个执行程序.订阅有一个很重要的方法,unsubscri ...