1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>无缝滚动跑马灯</title>
  6.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  7. </head>
  8. <style>
  9.     *{
  10.         margin:0;
  11.         padding:0;
  12.     }
  13.     ul li{
  14.         list-style:none;
  15.     }
  16.     .main{
  17.         width: 300px;
  18.         height:100px;
  19.         margin:100px auto;
  20.         position: relative;
  21.         overflow: hidden;
  22.     }
  23.     .main li{
  24.         float: left;
  25.         width:100px;
  26.         height:100px;
  27.     }
  28.     .main ul{
  29.         width:300px;
  30.         height:100px;
  31.         position: absolute;
  32.         left:0;
  33.         top:0;
  34.     }
  35.     .main li:nth-child(odd){
  36.         background-color: red;
  37.     }
  38.     .main li:nth-child(even){
  39.         background-color: blue;
  40.     }
  41.  
  42. </style>
  43. <body>
  44.     <div class="main">
  45.         <ul>
  46.             <li>1</li>
  47.             <li>2</li>
  48.             <li>3</li>
  49.         </ul>
  50.     </div>
  51. <script>
  52.     $(".main ul").append($(".main ul").html());
  53.     $(".main ul").width($(".main ul").width()*2);
  54.     $(function(){
  55.  
  56.         setInterval("my_left();",10);
  57.     });
  58.  
  59.     var left = 0;
  60.     function my_left(){
  61.  
  62.         left -= 20;
  63.         if(left <= -300){
  64.             left = 0;
  65.         }
  66.         console.log(left);
  67.         $('.main ul').animate({'left':left});
  68.     }
  69. </script>
  70. </body>
  71. </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. C++中的IO类(iostream, fstream, stringstream)小结（转）

    原文地址:https://blog.csdn.net/stpeace/article/details/44763009

  2. BZOJ 3143 游走

    Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点, ...

  3. 854. Floyd求最短路（模板）

    给定一个n个点m条边的有向图,图中可能存在重边和自环,边权可能为负数. 再给定k个询问,每个询问包含两个整数x和y,表示查询从点x到点y的最短距离,如果路径不存在,则输出“impossible”. 数 ...

  4. P1164 小A点菜【dp】

    P1164 小A点菜 提交 43.03k 通过 24.37k 时间限制 1.00s 内存限制 125.00MB 题目提供者洛谷 难度普及- 历史分数100 提交记录 查看题解 标签 洛谷原创   查看 ...

  5. idea AutoWired 报红

  6. Python之QRCode

    目录 一.基本介绍 介绍 QRCode二维码版本展示 QRCode方法 常用函数 二.安装QRCode 三.基本案例 生成普通二维码: 生成带有图片的二维码: 四.制作动态二维码 安装 myqr 和 ...

  7. Java基础面试题总结之简述题

    一,数组的优缺点 在Java核心技术卷1中写到数组是一种数据结构,用来储存同一类型值的集合. 优点: 1,按照索引查询元素速度快,效率高 2,能存储大量数据 3,按照索引遍历数组方便 缺点: 1,长度 ...

  8. sql语言分类及区别、显示和隐示提交的指令

    SQL的发展是从1974年开始的,其发展过程如下: 1974年-----由Boyce和Chamberlin提出,当时称SEQUEL. 1976年-----IBM公司的Sanjase研究所在研制RDBM ...

  9. 微信小程序中的左右联动

    微信小程序端的左右联动-滚动效果插件: 效果图如下:                                                                          ...

  10. JDBC添加为null的数据报错

    定义实体类的时候定义为了基本数据类型,不能接收null需要改为引用数据类型