<!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. 有了 CompletableFuture，使得异步编程没有那么难了！

    本文导读: 业务需求场景介绍 技术设计方案思考 Future 设计模式实战 CompletableFuture 模式实战 CompletableFuture 生产建议 CompletableFutur ...

  2. 开发电商平台用PHP语言和JAVA语言有什么区别？哪种语言更好？

    现在很多行业都通过电子商务拓展业务,所以商城系统开发成为很多企业的刚性需求.一般有一点技术基础的客户应该知道目前商城系统开发主流语言有两个,PHP和Java.那么很多客户朋友会纠结是选择哪个语言开发好 ...

  3. Redis优雅实现分布式锁

    文章原创于公众号:程序猿周先森.本平台不定时更新,喜欢我的文章,欢迎关注我的微信公众号. 在实际项目开发中经常会遇到这样一个业务场景:如果同一台机器有多个线程抢夺同一个共享资源,同一个线程多次执行会出 ...

  4. Nature Methods | 新软件SAVER-X可对单细胞转录组学数据进行有效降噪

                                                                          图片来源(Nature Methods)   摘要 单细胞转 ...

  5. JavaScript中闭包的使用和各种继承介绍

    一.什么是闭包?     (1)闭包的概念:a.闭包就是函数嵌套时,让局部变量变成自由变量的环境,是一种让局部变量进化的方式.                 b.定义在一个函数内部的函数.      ...

  6. Java入门之File类和IO流

    1.File类 java.io.File 类是文件和目录路径名的抽象表示,主要用于文件和目录的创建.查找和删除等操作 . 构造方法: public File(String pathname) :通过将 ...

  7. Rust入坑指南：常规套路

    搭建好了开发环境之后,就算是正式跳进Rust的坑了,今天我就要开始继续向下挖了. 由于我们初来乍到 ,对Rust还不熟悉,所以我决定先走一遍常规套路. 变不变的变量 学习一门语言第一个要了解的当然就是 ...

  8. intellj Idea git ignore文件的.idea不起作用解决

    问题描述: idea中使用git每次提交的时候都会选中项目目录下.idea目录,虽然设置了.ignore文件但是不起作用. 综合网上搜索结果,并完美解决,方法如下: 1.原因就是git已经关联追踪了这 ...

  9. Linux入门（服务）

    LInux入门之 服务 服务介绍 常驻在内存中的程序,且可以提供一些系统或网络功能,那就是服务.比如: apache提供web服务 ftp提供文件下载上传服务 ssh提供了远程连接服务 防火墙提供了安 ...

  10. python基本数据类型及常用功能

    1.数字类型 int -int(将字符串转换为数字) a = " print(type(a),a) b = int(a) print(type(b),b) num = " v = ...