<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title>跑马灯</title>

     <script src="../js/jquery-1.9.1.min.js"></script>

     <style>

         .maxdiv {

             border: 2px red solid;

             width: 510px;

             height: 510px;

             margin: 15% auto;

         }

             .maxdiv div {

                 width: 83px;

                 height: 83px;

                 border: 1px blue solid;

                 float: left;

                 text-align: center;

                 line-height: 83px;

             }

         .hiddendiv {

             visibility: hidden;

         }

         .rightdiv {

             clear: both;

             float: right !important;

         }

         .bottomdiv {

             float: right !important;

         }

         .leftdiv1 {

             position: absolute;

             margin-top: 339px;

         }

         .leftdiv2 {

             position: absolute;

             margin-top: 254px;

         }

         .leftdiv3 {

             position: absolute;

             margin-top: 171px;

         }

         .leftdiv4 {

             position: absolute;

             margin-top: 86px;

         }

         .startbtn {

             position: absolute;

             margin-left: 100px;

         }

     </style>

 </head>

 <body>

     <div class="maxdiv">

         <div></div>

         <div></div>

         <div></div>

         <div></div>

         <div></div>

         <div></div>

         <div class="rightdiv"></div>

         <div class="rightdiv"></div>

         <div class="rightdiv"></div>

         <div class="rightdiv"></div>

         <div class="rightdiv"></div>

         <div class="bottomdiv"></div>

         <div class="bottomdiv"></div>

         <div class="bottomdiv"></div>

         <div class="bottomdiv"></div>

         <div class="bottomdiv"></div>

         <div class="leftdiv1"></div>

         <div class="leftdiv2"></div>

         <div class="leftdiv3"></div>

         <div class="leftdiv4"></div>

         <button class="startbtn">开始</button>

     </div>

 </body>

 </html>

 <script>

     var i = 0,

         num,

         qs = 0,

         timer1;

     $(function () {

         $(".startbtn").click(function () {

             timer1 = setInterval(ttz, 100);

             num = Math.floor(Math.random() * 20 + 1) + 1;

         });

     });

     function ttz() {

         if (i == 20) { i = 0; qs++; }//当i等于最大值的时候初始化为最小值，遍历次数加一

         if (i < 20) {

             if (qs >= 2 && i == num) { clearInterval(timer1); qs = 0; i = 0;  return; }//当遍历次数大于2并且i等于随机数的时候,停止遍历

             $(".maxdiv div").eq(i).css({ "background-color": "red" }).siblings().css({ "background-color": "#fff" });

         }

         i++;

     }

 </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. iOS开发——UI篇&下拉弹出列表选择项效果

    下拉弹出列表选择项效果 右边菜单中的按键,点击弹出一个列表可选择,选择其中一个,响应相应的事件并把文字显示在右边的菜单上:弹出下拉效果使用LMDropdownView插件,可以用POD进行加载pod  ...

  2. setAnimationTransition:forView:cache: 运行动画时背景色问题

    首先我描写叙述一下问题:当我从一个view到另外一个view的时候? 解答:这个问题的解决还须要看setAnimationTransition:forView:cache: 官方Api,官方是这样说的 ...

  3. Python_爬虫2

    URLError异常处理 大家好,本节在这里主要说的是URLError还有HTTPError,以及对它们的一些处理. 1.URLError 首先解释下URLError可能产生的原因: 网络无连接,即本 ...

  4. Undefined property: Illuminate\Database\Eloquent\Builder

    是因为在 $activity=Activity::where('center_id','=',$center->id)->where('Date','=',date("Y-m-d ...

  5. 小白日记9：kali渗透测试之主动信息收集（二）四层发现：TCP、UDP、nmap、hping、scapy

    四层发现 四层发现的目的是扫描出可能存活的IP地址,四层发现虽然涉及端口扫描,但是并不对端口的状态进行精确判断,其本质是利用四层协议的一些通信来识别主机ip是否存在. 四层发现的优点: 1.可路由且结 ...

  6. BootStrap2学习日记12---注册表单

    <form method="" action="" class="form-horizontal"> <frameset& ...

  7. 防火墙导致FTP传输文件为0

    在使用 ftpClient 传输文件到FTPserver时,在别的机器上可以正常使用,但是到自己的机器有就始终是0文件,发现是Mcafee 防火墙导致的,只要让防火墙放行即可. Mcafee防火墙的放 ...

  8. Android（java）学习笔记100：android开发中修改字体

    首先如果android内部自带的字体不是我们需要的字体,那我们就需要字体文件导入到android开发工程中,下午我们详细讲述: 1.我们首先分析知道,我想要TextView控件中文字的字体是:华文楷体 ...

  9. centos搭建本地库

    --2013年8月23日11:00:26环境:centos6.3(64bit)--场景默认情况下在用yum install 安装软件会从配置库中下载依赖包默认依赖库:来自网络在本地搭建依赖库可以节约带 ...

  10. hdu 4669 动态规划

    思路:主要就是一个动态方程dp[now][(j*Exp[len[num[i]]]+num[i])%k]+=dp[pre][j];我用的是滚动数组.其实也就是dp[i][(j*Exp[len[num[i ...