<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>li列表测试简单js代码 无需引用插件</title>

    <!-- 引入jq -->

    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>

</head>

<style type="text/css">

    .view{

        margin: 0px auto;

    }

    ul{

        padding: 0px;

        list-style: none;

        width: 100%;

        height: 100%;

        position: relative;

        margin: 0px;

    }

    /**

    *循环列表必须大于ul可容纳数量

    */

    li{

        height: 40px;

        line-height: 40px;

        border-bottom: 1px #666 solid;

        background-color: #ccc;

    }

    /**

    *该样式必须

     */

    .ul_div{

        width: 300px;

        height: 200px;

        overflow: hidden;

    }

</style>

<body>

<div class="view">

    <div class="ul_div">

        <ul class="ul">

            <li>li列表测试简单js代码 无需引用插件</li>

            <li>li列表测试简单js代码 无需引用插件</li>

            <li>li列表测试简单js代码 无需引用插件</li>

            <li>li列表测试简单js代码 无需引用插件</li>

            <li>li列表测试简单js代码 无需引用插件</li>

            <li>li列表测试简单js代码 无需引用插件</li>

        </ul>

    </div>

</div>

<script type="text/javascript">

    var h_time;

    var h=0;

    $(function () {

        h_time=window.setInterval(h_top,3000);

    })

    function h_top() {

        var obj=$('.ul');

        if(h<40){

            h=h+1;

            obj.css('top',-h+'px')

            setTimeout(h_top,30);

            return false;

        }else{

            h=0;

            var i=$('.ul>li:nth-child(1)');

            obj.append(i);

            obj.css('top','0px')

        }

    }

</script>

</body>

</html>

li列表循环滚动的简单方法,无需插件,简单方法搞定的更多相关文章

  1. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  2. Myeclipse最简单的svn插件安装方法

    首先来这儿下载插件 http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 找个最新的下载   解压到对应的位置, ...

  3. Google 浏览器保存mht网页文件(单个网页)的方法(无需插件)

    1.找到设置打开单个网页保存的地方 在google浏览器地址栏输入:chrome://flags”,回车 2.实现保存单个网页 打开你要保存的网页后,只需 Ctrl+s ,搞定!如下: 假设找到了一篇 ...

  4. 简单的3个SQL视图搞定所有SqlServer数据库字典

    网上有很多SQL SERVER数据库字典的SQL语句,七零八落,我在工作整理了一下思路,总结SQL代码如下.数据库字典包括表结构(分2K和2005).索引和主键.外键.约束.视图.函数.存储过程.触发 ...

  5. Mysql5.7.26解压版(免安装版)简单快速配置步骤,5分钟搞定(win10-64位系统)

    第一次安装mysql环境的时候,总会遇到各种各样的坑,在尝试了安装版和解压版的数据库之后,感觉mysql的解压版更加的简单方便,省去好多时间做专业的事情 我这里选择的是5.7.26版本,解压版下载地址 ...

  6. jQuery $.fn.extend()方法类插件

    一.为JQuery原型扩展新的属性和方法,然后在JQuery的实例对象上调用 在 jQuery 中,我们可以使用$.fn.extend()方法来定义一个方法类插件.方法类插件就是首先你使用 jQuer ...

  7. Jquery制作--循环滚动列表

    自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...

  8. JavaScript学习笔记——简单无缝循环滚动展示图片的实现

    今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...

  9. jQuery 实现列表自动滚动循环滚动显示新闻通知

    需求 页面中一个小区域循环滚动展示通知(公告.新闻.活动.图片等),并且鼠标hover时停止滚动并提示,鼠标离开后,继续滚动. 效果图 https://www.iguopin.com/index.ph ...

随机推荐

  1. Shell之文本排序命令

    目录 Shell之文本排序命令 参考 wc命令 sort命令 uniq命令 Shell之文本排序命令

  2. 【solved】must have one register DataBase alias named `default`

    beego在初始化MySQL数据库时报错处理 1.报错提示: ... [ORM]2019/10/11 08:42:52 register db Ping `default`, dial tcp 192 ...

  3. 02-14 scikit-learn库之逻辑回归

    目录 scikit-learn库之逻辑回归 一.LogisticRegression 1.1 使用场景 1.2 代码 1.3 参数详解 1.4 属性 1.5 方法 二.LogisticRegressi ...

  4. Java8新特性之空指针异常的克星Optional类

    Java8新特性系列我们已经介绍了Stream.Lambda表达式.DateTime日期时间处理,最后以"NullPointerException" 的克星Optional类的讲解 ...

  5. django rest framework1

    内容回顾: 1.开发模式 - 普通开发方式(前后端放在一起写) - 前后端分离 2.后端开发 为前端提供URL(API/接口的开发) 注:永远返回HttpResponse 3.Django FBV.C ...

  6. 分享：JS视频在线视频教程

    作者说明 (1)JS说明 JS是非常重要的一门语言,但是,我们对JS的认识似乎仍然停留在“hello word”或者“alert”的观念上.其实,JS发展到现在已经非常的成熟,功能也非常的强大,因此, ...

  7. NOIP2009 Hankson 的趣味题 ： 数论

    题目描述 Hanks 博士是 BT (Bio-Tech,生物技术) 领域的知名专家,他的儿子名叫 Hankson.现在,刚刚放学回家的 Hankson 正在思考一个有趣的问题. 今天在课堂上,老师讲解 ...

  8. nginx::配置https/反向代理

    vim /etc/nginx/nginx.conf user nginx; worker_processes ; error_log /var/log/nginx/error.log warn; pi ...

  9. libevent::bufferevent

    #include <cstdio> #include <netinet/in.h> #include <sys/socket.h> #include <fcn ...

  10. Windows 批量修改文件后缀名

    利用ren 文件名替换命令 for循环去批处理 @echo off for %%m in (*) do ( if not "%%m"=="temp.bat"( ...