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. 【bat】判断字符串是否包含某字符串

    @echo off set a=55544333 set c=6666dfsfds set b=44 echo %a%| findstr %b% >nul && ( echo % ...

  2. python入门之函数对象

    目录 函数是第一类对象 1.函数名可以被引用 2.函数名可以当做参数传递 3.函数名可以当做返回值使用 4.函数名可以被当做容器类型的元素 函数是第一类对象 First-Class Object : ...

  3. 升级最新版Rancher 2.2.6

    前言:之前采用离线方式部署好了 Rancher 2.2.4(https://www.cnblogs.com/weavepub/p/11053099.html),这次升级到最新版本 Rancher 2. ...

  4. Chartjs 简单使用 ------ 制作sin cos 折线图

    Chart.js 一款简单干净的图表工具,基于html5 的Javascript. 可以用来制做条形,扇形,折线,混合等等的强大工具 图表要放在html 的  cancas  标签中 <canv ...

  5. es6和es5函数参数和arguments的差别

    注: 这里说的 es5 代表的都是非严格模式下. es6之前函数的参数不能传默认值: function fn(a, b){ console.log(a) console.log(b) } fn(2) ...

  6. 利用TCHART做分离饼形图

    https://www.cnblogs.com/gaodu2003/archive/2009/06/18/1505720.html unit Unit1; interface ……type  TFor ...

  7. vue实现跨域请求的设置

    vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...

  8. quota - linux磁盘配额管理

    磁盘管理系列 linux磁盘管理系列一:磁盘配额管理   http://www.cnblogs.com/zhaojiedi1992/p/zhaojiedi_linux_040_quota.html l ...

  9. postman发送数据，django 获取接收数据

    postman发起请求如下图 在django中使用如下方式获取token print(request.META) token = request.META.get('HTTP_X_TOKEN')

  10. 从 Vue 的视角学 React（一）—— 项目搭建

    虽然 Vue 在国内一家独大,但在全球范围内,React 依然是最流行的前端框架 最近和一些朋友聊天,发现很多项目都选择了 React 技术栈,而且公司的新项目也决定使用 React 我一直以来都是走 ...