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. 连上Microbit板

    我们是在自己电脑上,用Mu编程,最终程序要烧录到Microbi板子的控制芯片中去,还记得这款芯片是哪家公司生产的?是多少位的?呵呵. 因此,我们要把板子和电脑连起来,用常见的一大一小的USB线就可以了 ...

  2. Oracel 数据库表操作

    表结构操作 创建表 create table tableName (id varchar2(36) primary key, name varchar2(36), age number(12,2), ...

  3. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

  4. 简单聊聊服务发现(redis, zk,etcd, consul)

    什么是服务发现? 服务发现并没有怎样的高深莫测,它的原理再简单不过.只是市面上太多文章将服务发现的难度妖魔化,读者被绕的云里雾里,顿觉自己智商低下不敢高攀. 服务提供者是什么,简单点说就是一个HTTP ...

  5. drf--ModelSerializers序列化

    目录 drf--ModelSerializers序列化 项目准备 配置 settings.py 路由 多表设计 表关系分析 创建models 模型序列化 自定义模型序列化 api/serializer ...

  6. comet oj #7

    A 签到题 题目描述 多次询问,每次询问给一个值域范围 [l,r][l,r],要回答下列四个问题: 从这个范围内选出两个整数(两个数可相同), (1) 这两个数的最小公倍数最大是多少? (2) 这两个 ...

  7. C#开发中常用的加密解密方法

    转载自:https://www.cnblogs.com/bj981/p/11203711.html C#开发中常用的加密解密方法 相信很多人在开发过程中经常会遇到需要对一些重要的信息进行加密处理,今天 ...

  8. 【转载】如何查看本机电脑的公网IP

    在实际使用电脑的过程中,很多时候我们需要知道本地电脑的当前公网IP地址,我们都知道个人电脑的公网IP是不固定的,可能每天的对外公网IP都不一样,如果要查看当前本机电脑的对外公网IP,方法也很简单,直接 ...

  9. vue动态子组件的实现方式

    让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <d ...

  10. ThinkPHP5 Nginx通用配置

    项目配置内容如下: server { #配置监听端口 listen 80; listen [::]:80; #设置网站根目录作为变量root set $root /var/www/web; #设置网站 ...