<!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. mysql 时间与字符串相互转换

    时间.字符串.时间戳之间的相互转换:date转字符串.date转时间戳.字符串转date.字符串转时间戳.时间戳转date,时间戳转字符串用法 涉及的函数 date_format(date, form ...

  2. json与java对象的转换,以及struts2对json的支持,实现ajax技术

    这两天学的东西有点多,今天抽个时间写下来,以此作为激励,这两天学了json,ajax,jQuery 一.使用第三方的工具java转换为json类型 首先就是java类型转换为json对象,首先要导入第 ...

  3. Kafka 学习笔记之 High Level Consumer相关参数

    High Level Consumer相关参数 自动管理offset auto.commit.enable = true auto.commit.interval.ms = 60*1000 手动管理o ...

  4. 利用Dockerfile部署SpringBoot项目

    利用Dockerfile部署SpringBoot项目 1.创建一个SpringBooot项目并且打成jar包 2.在Linux中创建一个文件夹,来做docker测试 [root@izwz90lvzs7 ...

  5. Python 命令行参数解析工具 argparse

    为什么需要argparse 开门见山,举一个简易计算器代码的例子,其中sys.argv用来读取脚本执行时后面传入的参数. def calculator(x, y, operation): if &qu ...

  6. @DateTimeFormat注解

    @DateTimeFormat在spring-context依赖下,所在包如下 当form表单中出现时间字段需要跟pojo对象中的成员变量进行数据绑定时,springmvc框架中的时间数据无法自动绑定 ...

  7. 数据的异构实战（一） 基于canal进行日志的订阅和转换

    什么是数据的异构处理.简单说就是为了满足我们业务的扩展性,将数据从某种特定的格式转换到新的数据格式中来. 为什么会有这种需求出现呢? 传统的企业中,主要都是将数据存储在了关系型数据库中,例如说MySQ ...

  8. 考试题string——线段树。

    string[题目描述]给定一个由小写字母组成的字符串 s.有 m 次操作,每次操作给定 3 个参数 l,r,x.如果 x=1,将 s[l]~s[r]升序排序;如果 x=0,将 s[l]~s[r]降序 ...

  9. HDU 1428漫步校园

    漫步校园 Problem Description LL最近沉迷于AC不能自拔,每天寝室.机房两点一线.由于长时间坐在电脑边,缺乏运动.他决定充分利用每次从寝室到机房的时间,在校园里散散步.整个HDU校 ...

  10. Vue-CLI项目-axios模块前后端交互(类似ajax提交)

    08.31自我总结 Vue-CLI项目-axios前后端交互 一.模块的安装 npm install axios --save #--save可以不用写 二.配置main.js import axio ...