<!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. Typecho的卡哇伊小猫咪小插件（Live2D猫咪插件）

    之前看到一个博客,被它博客上的动态小猫咪给吸引了,这个纯粹就是一个在线撸猫的神器啊.但是在网上寻找一番,并没有找到合适的插件,或者说没有找到合适的模型,因此无奈之后,只能向该博主请教,在它写的博客上, ...

  2. 如何在任意文件下启动jupyter notebook，而不用担心环境配置问题

    网上看了很多帖子,说可以写一个bat文件,将bat文件放在你想启动jupyter notebook的地方.可是不行,不能解决我的问题!!!!!!!!!!! 网上是这样说的: ######这为引用### ...

  3. 小I的小姐姐

    小 I 的小姐姐 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 小 I 去天津玩啦,一路上,他跟他的同学发生了许多有趣 ...

  4. [SHOI2001] 小狗散步 - 二分图匹配

    考虑到每次与主人相遇之前最多只去一个景点,很容易转化为匹配问题 由于数据很小,我们不妨枚举每个相遇点间隙和每个景点,判断是否来得及,如果来得及就连边 沙雕题搞了二十来分钟,我是憨憨 #include ...

  5. 148.CSRF攻击原理分析、防御、装饰器、中间件、IFrame以及js实现csrf攻击

    CSRF攻击概述: CSRF(Cross Site Request Forgery 跨站域请求伪造)是一种网站攻击的方式,它在2007年曾被列为互联网20大安全隐患之一.其他的安全隐患,比如SQL脚本 ...

  6. 4817 [Sdoi2017]树点涂色

    题目描述 Bob 有一棵 n 个点的有根树,其中 1 号点是根节点.Bob 在每个点上涂了颜色,并且每个点上的颜色不同. 定义一条路径的权值是:这条路径上的点(包括起点和终点)共有多少种不同的颜色. ...

  7. 虚拟磁盘VHD文件压缩方法

    问题描述 因工作需要在Mac上跑了一个VirtualBox虚拟win7,使用对win系统友好的vhd格式作为虚拟硬盘.经过一段时间使用发现vhd占用空间远大于虚拟磁盘使用量,想办法减减肥才行. 步骤整 ...

  8. bat代码中判断 bat是否是以管理员权限运行，以及自动以管理员权限运行CMD BAT

    · bat 代码中判断bat是否是以管理员权限运行,以及自动以管理员权限运行CMD BAT 一.判断bat是否是以管理员权限运行 @echo off net.exe session >NUL & ...

  9. C语言-数组指针与指针数组

    1.思考 下面这些声明合法吗? int array[5]; int matrix[3][3]; int * pa = array; int * pm = matrix; 问题: array代表数组首元 ...

  10. Oracle查询当前用户和当前用户下的所有表

    转载自:http://blog.itpub.net/29485627/viewspace-1246317/ Oracle查询当前用户和当前用户下的所有表 (1)查询当前用户 SQL> show ...