JQ跑马灯 

  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哈哈~  

posted @ 2016-06-17 16:14  紫菜、  阅读(566)  评论(0)  编辑  收藏  举报