<!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. Java 学习笔记之 方法内的临时变量是线程安全

    方法内的临时变量是线程安全: 方法内部的私有变量,是线程安全的. public class HasSelfPrivateNum { public void addI(String username) ...

  2. .net core session的使用步骤

    步骤 操作 备注 1   Microsoft.AspNetCore.Session Microsoft.AspNetCore.Http.Extensions nuget安装包 2 ConfigureS ...

  3. 【JavaScript】 控制自适应高度

    <iframe src="需要连接的iframe地址" id="iframepage" name="iframepage" frame ...

  4. 低效sql语句执行缓慢引起的大量占用服务器的CPU问题处理 （优化心得）

    1> 2> 3> 4> 5>删除不良的执行计划后执行时间仍然有150s,这实在是太慢了,继续查看原sql代码,发现父表的关联条件放在了子查询里,这是应该避免的 调整原sq ...

  5. ionic3 浏览器端返回

    首屏component.ts文件中使用setupBrowserBackButtonBehavior() { // Register browser back button action(s) wind ...

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

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

  7. markdown下载、安装、破解、汉化与常用语法

    markdown是一种纯文本格式的标记语言.通过简单的标记语法,它可以使普通文本内容具有一定的格式. 一.markdown下载 markdown破解版下载地址: http://www.pc6.com/ ...

  8. 最新打赏正版V15微信视频打赏源码 带(百倍)暗雷 N秒试看 自动切换域名 自动防封

    免签支付域名防封随机跳转盒子推广设置试看N秒百倍 平台搭建:乌龟-源码科技QQ:64430146 全新版本 V15打赏版本功能介绍: 特别注意: 新增加功能!!!! 1.包括V14所有功能(除个别因优 ...

  9. 支撑微博亿级社交平台，小白也能玩转Redis集群(原理篇)

    Redis作为一款性能优异的内存数据库,支撑着微博亿级社交平台,也成为很多互联网公司的标配.这里将以Redis Cluster集群为核心,基于最新的Redis5版本,从原理再到实战,玩转Redis集群 ...

  10. Redis高级应用解析：缓存穿透、击穿、雪崩

    1 背景 像我们去面试一些大公司的时候,就会遇到一些关于缓存的问题.可能很多同学都是接触过,多多少少了解一些,但是如果没有好好记录这些内容,不熟练精通的话,在真正面试的时候,就很难答出来了. 在我们的 ...