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. 使用Clion优雅的完全远程自动同步和远程调试c++

    摘要:在linux上用vim写C++的时候,通常用gdb进行调试,不能随心所欲的看代码和跳转代码以及加watch(也有可能是因为我还没有get正确的使用方法).为此我发现Clion可以做到自动同步本场 ...

  2. lower_bound()和upper_bound()

    lower_bound()和upper_bound() 是方便的在有序数组中二分查找的函数,并且在STL其他数据结构中也提供该方法(如map和set). 但是两函数并不是二分查找"小于&qu ...

  3. Centos Docker 安装 Apache Guacamole

    经常在ubuntu上折腾,偶尔在centos来也来玩一把吧 1.安装DOCKER cd /etc/yum.repos.d wget https://download.docker.com/linux/ ...

  4. 【题解】保安站岗[P2458]皇宫看守[LOJ10157][SDOI2006]

    [题解]保安站岗[P2458]皇宫看守[LOJ10157][SDOI2006] 传送门:皇宫看守\([LOJ10157]\) 保安站岗 \([P2458]\) \([SDOI2006]\) [题目描述 ...

  5. 【LeetCode】387. First Unique Character in a String

    Difficulty:easy  More:[目录]LeetCode Java实现 Description https://leetcode.com/problems/first-unique-cha ...

  6. 备忘】HttpContextAccessor类

    AspNetCore / src / Http / Http / src / HttpContextAccessor.cs // Copyright (c) .NET Foundation. All ...

  7. MySQL常用sql语句大全

    创建数据库 1 create database dbname; 删除数据库 1 drop database dbname; 选择数据库 1 use dbname; 创建表 12345678 CREAT ...

  8. mybatis关联映射一对多

    实际项目中也存在很多的一对多的情况,下面看看这个简单的例子 table.sql CREATE TABLE tb_clazz( id INT PRIMARY KEY AUTO_INCREMENT, CO ...

  9. 下载安装Tomcat教程

    注:由于我的笔记不知怎么滴不能复制粘贴我就直接贴图了

  10. vue组件5 组件和v-for指令

    使用v-for遍历一个数组的时候,并且给定的数组变化时vue不会重复生成所有的元素,而是智能的找到需要更改的元素,并只改变这些元素 key属性可以告诉vue数组中的每个元素都应该与页面上的哪个元素相关 ...