<!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. 【SQL基础】char，nchar，vchar,nvchar之间的区别

    (1)       定义: char:    固定长度,存储ANSI字符,不足的补英文半角空格. nchar:   固定长度,存储Unicode字符,不足的补英文半角空格 varchar:  可变长度 ...

  2. Kafka常用命令合集

    在上一篇文章<Linux安装Kafka>中,已经介绍了如何在Linux安装Kafka,以及Kafka的启动/关闭和创建发话题并产生消息和消费消息.这篇文章就介绍介绍Kafka的那些常用的命 ...

  3. AVR单片机教程——数字IO寄存器

    前两篇教程中我们学习了LED.按键.开关的基本原理,数字输入输出的使用以及两者之间的关系.我们用到了 pin_mode . pin_read 和 pin_write 这三个函数,实际上它们离最底层(至 ...

  4. 使用 chart 部署 skywalking

    使用 chart 部署 skywalking 本文主要讲述的是如何使用 Helm Charts 将 SkyWalking 部署到 Kubernetes 集群中,相关文档可以参考skywalking-k ...

  5. Javascript中Promise的简单使用

    // 函数功能:1秒以后创建一个10以内的随机整数,并判断这个数是否为偶数:如果是偶数则做一件事情,如果是奇数则做另一件事情 function doSomthing() { var promise = ...

  6. MongoDB 学习笔记之 基本CRUD

    Mongo 命令: show databases/dbs; use test; show tables/collections; db.help() db.createCollection('user ...

  7. mac下的环境变量

    a. /etc/profile b. /etc/paths c. ~/.bash_profile d. ~/.bash_login e. ~/.profile f. ~/.bashrc 其中a和b是系 ...

  8. 编程杂谈——使用emplace_back取代push_back

    近日在YouTube视频上看到关于vector中emplace_back与push_back区别的介绍,深感自己在现代C++中还是有不少遗漏的知识点,遂写了段代码,尝试比较两者的差别. 示例代码 #i ...

  9. 洛谷 P2145 [JSOI2007]祖码

    题目描述 这是一个流行在Jsoi的游戏,名称为祖玛. 精致细腻的背景,外加神秘的印加音乐衬托,彷佛置身在古老的国度里面,进行一个神秘的游戏——这就是著名的祖玛游戏.祖玛游戏的主角是一只石青蛙,石青蛙会 ...

  10. VUE--插值的操作

    一.vue常见的指令 v-once:保留第一次渲染结果 v-html :把html代码解析,只显示内容 v-pre :原样输出 v-cloak :解决文本闪烁问题 v-text :显示文本 二.v-b ...