1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8" />
  5.      <title>跑马灯</title>
  6.      <script src="../js/jquery-1.9.1.min.js"></script>
  7.      <style>
  8.          .maxdiv {
  9.              border: 2px red solid;
  10.              width: 510px;
  11.              height: 510px;
  12.              margin: 15% auto;
  13.          }
  14.              .maxdiv div {
  15.                  width: 83px;
  16.                  height: 83px;
  17.                  border: 1px blue solid;
  18.                  float: left;
  19.                  text-align: center;
  20.                  line-height: 83px;
  21.              }
  22.          .hiddendiv {
  23.              visibility: hidden;
  24.          }
  25.  
  26.          .rightdiv {
  27.              clear: both;
  28.              float: right !important;
  29.          }
  30.  
  31.          .bottomdiv {
  32.              float: right !important;
  33.          }
  34.  
  35.          .leftdiv1 {
  36.              position: absolute;
  37.              margin-top: 339px;
  38.          }
  39.  
  40.          .leftdiv2 {
  41.              position: absolute;
  42.              margin-top: 254px;
  43.          }
  44.  
  45.          .leftdiv3 {
  46.              position: absolute;
  47.              margin-top: 171px;
  48.          }
  49.  
  50.          .leftdiv4 {
  51.              position: absolute;
  52.              margin-top: 86px;
  53.          }
  54.  
  55.          .startbtn {
  56.              position: absolute;
  57.              margin-left: 100px;
  58.          }
  59.      </style>
  60.  </head>
  61.  <body>
  62.      <div class="maxdiv">
  63.          <div></div>
  64.          <div></div>
  65.          <div></div>
  66.          <div></div>
  67.          <div></div>
  68.          <div></div>
  69.          <div class="rightdiv"></div>
  70.          <div class="rightdiv"></div>
  71.          <div class="rightdiv"></div>
  72.          <div class="rightdiv"></div>
  73.          <div class="rightdiv"></div>
  74.          <div class="bottomdiv"></div>
  75.          <div class="bottomdiv"></div>
  76.          <div class="bottomdiv"></div>
  77.          <div class="bottomdiv"></div>
  78.          <div class="bottomdiv"></div>
  79.          <div class="leftdiv1"></div>
  80.          <div class="leftdiv2"></div>
  81.          <div class="leftdiv3"></div>
  82.          <div class="leftdiv4"></div>
  83.          <button class="startbtn">开始</button>
  84.      </div>
  85.  </body>
  86.  </html>
  87.  <script>
  88.      var i = 0,
  89.          num,
  90.          qs = 0,
  91.          timer1;
  92.      $(function () {
  93.          $(".startbtn").click(function () {
  94.              timer1 = setInterval(ttz, 100);
  95.              num = Math.floor(Math.random() * 20 + 1) + 1;
  96.          });
  97.      });
  98.  
  99.      function ttz() {
  100.          if (i == 20) { i = 0; qs++; }//当i等于最大值的时候初始化为最小值，遍历次数加一
  101.          if (i < 20) {
  102.              if (qs >= 2 && i == num) { clearInterval(timer1); qs = 0; i = 0;  return; }//当遍历次数大于2并且i等于随机数的时候,停止遍历
  103.              $(".maxdiv div").eq(i).css({ "background-color": "red" }).siblings().css({ "background-color": "#fff" });
  104.          }
  105.          i++;
  106.      }
  107.  </script>

样子有点戳，别见怪！O(∩_∩)O哈哈~

JQ跑马灯的更多相关文章

  1. jq跑马灯效果

    这几天公司产品有个无缝循环滚动的广告跑马灯要做,最开始想到的是<marquee>标签,但在PC端正常,在安卓广告屏上却怎么都跑不动,后来用的css3的animation,结果也是PC端及其 ...

  2. Android-TextView跑马灯效果

    要实现跑马灯还是比较简单的. 同时有几个需要注意的点,先上代码: public class MTView extends TextView { public MTView(Context contex ...

  3. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  4. IOS跑马灯效果，实现文字水平无间断滚动

    ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer ...

  5. 【IOS】自定义可点击的多文本跑马灯YFRollingLabel

    需求 项目中需要用到跑马灯来仅展示一条消息,长度合适则不滚动,过长则循环滚动. 虽然不是我写的,但看了看代码,是在一个UIView里面放入两个UILabel, 在前一个快结束的时候,另一个显示.然而点 ...

  6. Android:TextView文字跑马灯的效果实现

    解决TextView文字显示不全的问题. 简单设置跑马灯的效果: <TextView android:id="@+id/textView" android:layout_wi ...

  7. canvas九宫格跑马灯

    canvas九宫格跑马灯抽奖 之前用dom写了一版,部分 安卓机会卡顿,换用canvas dom版本九宫格抽奖

  8. Third Day:正式编程第三天,学习实践内容TextView跑马灯、AutoCompleteTextView、multiAutoCompleteTextView以及ToggleButton、checkedBox、RadioButton等相关实践

    2.针对Focused的TextView跑马灯(文字较多一行无法显示)效果 针对单个TextView的跑马灯效果,可直接在TextView控件参数中添加三个属性: android:singleLine ...

  9. TextView跑马灯效果

    转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...

随机推荐

  1. JVM自动内存管理学习笔记

    对于使用 C.C++ 的程序员来说,在内存管理领域,他们既是拥有最高权力的皇帝又是从事最基础工作的劳动人民——拥有每一个对象的“所有权”,又担负着每一个对象生命开始到终结的维护责任.对于 Java 程 ...

  2. Particle designer 粒子工具中属性对应功能的简单介绍

    粒子配置 Max Particles 粒子的数量  一般而言,我们的目标是用最少的粒子创造出所需的效果.单个粒子的大小对游戏运行效率也有很大的影响——单个粒子越小,性能越高. Lifespan 生命周 ...

  3. AngularJS - Apply方法监听model变化

    <body> <div ng-app="myApp"> <div ng-controller="firstController" ...

  4. 谈KVC、KVO（重点观察者模式）机制编程

    一不小心,小明在<跟着贝尔去冒险>这个真人秀节目中看到了“一日警察,一世警察”的Laughing哥,整个节目除了贝尔吃牛睾丸都不用刀叉的不雅餐饮文化外,还是镜头少普通话跟小明一样烂的Lau ...

  5. akw、grep、sed常用命令

    awk 求和 cat data|awk '{sum+=$1} END {print "Sum = ", sum}' 平均值 cat data|awk '{sum+=$1} END ...

  6. Telnet客户端连接服务器，看不见字符，只显示横线

    Telnet 窗口看不见字符,只显示小横线 在用telnet连接tomcat服务器的 时候,窗口中不显示字符,显示成一个一个的横线 解决办法: 按住“Ctrl+]” 回车解决问题

  7. [转]How to convert IP address to country name

    本文转自:http://www.codeproject.com/Articles/28363/How-to-convert-IP-address-to-country-name   Download ...

  8. poisspdf（so also poisscdf, poissfit, poissinv, poissrnd, poisstat, pdf.）

    Poisson分布的累积概率值 命令:poisscdf 格式:poisscdf (k, Lambda) Poisson分布 在二项分布中,当n的值很大,p的值很小,而np又较适中时,用Poisson分 ...

  9. 极其简单的使用基于gulp和sass前端工作流

    简单的记录自己如何在实际工作中使用gulp和sass的.我的原则是,小而美! gulp与sass介绍 gulp 什么是gulp?和Grunt一样,是一种任务管理工具:和Grunt又不一样,gulp是一 ...

  10. Ehcache(2.9.x) - API Developer Guide, Cache Event Listeners

    About Cache Event Listeners Cache listeners allow implementers to register callback methods that wil ...