<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>无缝滚动跑马灯</title>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<style>

    *{

        margin:0;

        padding:0;

    }

    ul li{

        list-style:none;

    }

    .main{

        width: 300px;

        height:100px;

        margin:100px auto;

        position: relative;

        overflow: hidden;

    }

    .main li{

        float: left;

        width:100px;

        height:100px;

    }

    .main ul{

        width:300px;

        height:100px;

        position: absolute;

        left:0;

        top:0;

    }

    .main li:nth-child(odd){

        background-color: red;

    }

    .main li:nth-child(even){

        background-color: blue;

    }

</style>

<body>

    <div class="main">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

        </ul>

    </div>

<script>

    $(".main ul").append($(".main ul").html());

    $(".main ul").width($(".main ul").width()*2);

    $(function(){

        setInterval("my_left();",10);

    });

    var left = 0;

    function my_left(){

        left -= 20;

        if(left <= -300){

            left = 0;

        }

        console.log(left);

        $('.main ul').animate({'left':left});

    }

</script>

</body>

</html>

js无缝滚动跑马灯的更多相关文章

  1. Android:TextView 自动滚动(跑马灯) （转）

    Android:TextView 自动滚动(跑马灯)       TextView实现文字滚动需要以下几个要点: 1.文字长度长于可显示范围:android:singleLine="true ...

  2. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. js无缝滚动原理及详解[转自刹那芳华]

    刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...

  4. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  5. Unity3D 文字滚动跑马灯效果

    需求 在日常游戏中,文字滚动效果是比较常用的.例如日常游戏顶部的新闻公告,聊天系统的文字滚动,都属于这个范围. 思路 由于使用的地方比较广泛,所以希望能够尽量独立的游戏之外,能够做到随处使用的功能.N ...

  6. js实现横向跑马灯效果

    首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...

  7. js抽奖，跑马灯

    分享自己写的跑马灯抽奖. HTML代码 <!--首先将一个div的背景设为一个圆形--> <div style=" width:240px; height:232px; b ...

  8. JS无缝滚动

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  9. [Js]无缝滚动

    效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向 ...

随机推荐

  1. 折半枚举+Hash（HDU1496升级版）

    题目链接:N - 方程的解 给定一个四元二次方程: Ax1^2+Bx2^2+Cx3^2+Dx4^2=0 试求−1000≤x1,x2,x3,x4≤1000非零整数解的个数. −10000≤A,B,C,D ...

  2. GYCTF easy_thinking

    前期储备:ThinkPHP6 任意文件操作漏洞分析 https://paper.seebug.org/1114/ 学习链接: https://www.freebuf.com/articles/web/ ...

  3. ASP.NET MVC模块化开发——动态挂载外部项目

    最近在开发一个MVC框架,开发过程中考虑到以后开发依托于框架的项目,为了框架的维护更新升级,代码肯定要和具体的业务工程分割开来,所以需要解决业务工程挂载在框架工程的问题,MVC与传统的ASP.NET不 ...

  4. react-父子子孙组件嵌套-context

    方案一 import React from 'react' import ReactTypes from 'prop-types' /* // 最外层的父组件 export default class ...

  5. java - GC垃圾收集器详解（一）

    概要 该图标记了在jdk体系中所使用到的垃圾收集器及对应的关系图.图片上方为年轻代的垃圾收集器而图片下方是老年代的垃圾收集器.当选择某一个区域的垃圾收集器时会自动选择另外一个区域的另一个垃圾收集器.例 ...

  6. 2019-08-20 纪中NOIP模拟A组

    T1 [JZOJ6310] Global warming 题目描述 给定整数 n 和 x,以及一个大小为 n 的序列 a. 你可以选择一个区间 [l,r],然后令 a[i]+=d(l<=i< ...

  7. git 命令 总结

    1.添加所有文件 git add . 2.添加某个文件 git add filename 3.commit 注释 git commit -m'commit 注释' 4.修改commit 注释 git ...

  8. Pytest学习9-常用插件

    pytest-django:为django应用程序编写测试. pytest-twisted:为twisted应用程序编写测试,启动反应堆并处理测试函数的延迟. pytest-cov:覆盖率报告,与分布 ...

  9. jQuery里ready方法用原生js实现原理

    function ready(fn){ if(document.addEventListener){ //标准浏览器 document.addEventListener('DOMContentLoad ...

  10. IntelliJ IDEA 2019.1.3 最新破解教程【最强 可用至2099年】

    本文包括最新[2019.1.2]安装 和[2018.3.2](推荐)安装 ①IntelliJ IDEA 2018.3.2安装永久安装[最强]  一. 在官网下载IDEA安装包  链接:https:// ...