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. Python 3 + Selenium 3 实现汉堡王客户调查提交

    用Python 3 + Selenium 3实现汉堡王客户调查的自动填写,可以用来作为 python selenium的入门学习实现脚本,列举了几个比较不太好弄的知识点. 上代码: from sele ...

  2. k8s的学习

    20191123 开始重头再学一遍k8 一 K8S的组件介绍

  3. 简洁的 Python Schema

    目录 Python Schema使用说明 1. Schema是什么? 2. 安装 1. 给Schema类传入类型(int.str.float等) 2. 给Schema类传入可调用的对象(函数.带__c ...

  4. easyui-datagrid 加载数据 的两种方法

    var start_date_entered=$('#start_date_entered').val(); //创建时间 var stop_date_entered=$('#stop_date_en ...

  5. Web api 右连接

    这是原来的代码,两个表的连接的方式是inner join ,查不出我要的全部数据. 后来把代码稍稍改一下,就是left join  join into 到一个临时对象里,相当于再select from ...

  6. 详细的Hadoop的入门教程-单机模式 Standalone Operation

    一. 单机模式Standalone Operation 单机模式也叫本地模式,只适用于本地的开发调试,或快速安装体验hadoop,本地模式的安装比较简单,下载完hadoop安装包就可以直接运行. 1. ...

  7. 记一下python的method resolution order（MRO）机制

    一直用python都是拿着cookbook和库的文档直接撸,很少会把细节过得那么彻底,遇到问题才会翻文档. 今天看到这个例子的时候我突然触及了我的盲区,我不确定这样的继承层级调用super.foo() ...

  8. android的子线程切换到主线程

    在子线程中,如果想更新UI,必须切换到主线程,方法如下: if (Looper.myLooper() != Looper.getMainLooper()) { // If we finish mark ...

  9. xenserver 备份和还原

    1. 备份和还原xenserver host系统 //备份 # xe host-backup file-name=[name.xbk] -s [ip] -u [username] -pw [passw ...

  10. Git submodule 子模块的管理和使用

    因为代码分了两个小组管理,一部分代码使用跨平台语言实现,一部分使用原生实现. 所以使用Git submodule 来进行管理. 1,查看/更新 子模块 $ git submodule add ssh: ...