Layui table表格无缝向上滚动

2019/04/20 09:53
阅读数 197

   代码简单易懂。可以根据需求进行更改。

   

  1 <!doctype html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>文字逐行向上滚动代码</title>
  6 
  7         <link rel="stylesheet" href="static/layui/css/layui.css" media="all" />
  8         <link rel="stylesheet" href="static/css/myCss.css" />
  9 
 10         <script type="text/javascript" src="static/js/jquery-1.4.2.min.js"></script>
 11         <script src="static/layui/layui.js"></script>
 12 
 13         <style>
 14             *{ margin:0px; padding:0px; font-family:'微软雅黑'; -webkit-tap-highlight-color:rgba(0,0,0,0);  }
 15             li{ list-style:none }
 16             img{ border:none}
 17             a{text-decoration:none;} 
 18             .Top_Record{}
 19             
 20             .record_Top{width:10%; height:50px; text-align:center; line-height:50px; margin:30px auto 0px; color:#000;}
 21             .topRec_List dl,.maquee{ width:90%; overflow:hidden; margin:0 auto; color:#7C7C7C}
 22             .topRec_List dd{ float:left; text-align:center; border-bottom:1px solid #1B96EE; color:#1B96EE;}
 23             
 24             .topRec_List dl dd:nth-child(1){ width:11%; height:40px; line-height:40px; }
 25             .topRec_List dl dd:nth-child(2){ width:11%; height:40px; line-height:40px; }
 26             .topRec_List dl dd:nth-child(3){ width:11%; height:40px; line-height:40px; }
 27             .topRec_List dl dd:nth-child(4){ width:11%; height:40px; line-height:40px; }
 28             .topRec_List dl dd:nth-child(5){ width:11%; height:40px; line-height:40px; }
 29             .topRec_List dl dd:nth-child(6){ width:11%; height:40px; line-height:40px; }
 30             
 31             
 32             .maquee{ height:410px;}
 33             .topRec_List ul{ width:100%; height:225px;}
 34             .topRec_List li{ width:100%; height:38px; line-height:38px; text-align:center; font-size:12px;border-bottom:1px solid #e6e6e6;}
 35             /*.topRec_List li:nth-child(2n){ background:#077cd0}*/
 36             .topRec_List li div{ float:left;}
 37             .topRec_List li div:nth-child(1){ width:11%;}
 38             .topRec_List li div:nth-child(2){ width:11%;}
 39             .topRec_List li div:nth-child(3){ width:11%;}
 40             .topRec_List li div:nth-child(4){ width:11%;}
 41             .topRec_List li div:nth-child(5){ width:11%;}
 42             .topRec_List li div:nth-child(6){ width:11%;}
 43             .topRec_List li div:nth-child(7){ width:11%;}
 44             .topRec_List li div:nth-child(8){ width:11%;}
 45             .topRec_List li div:nth-child(9){ width:11%;}
 46             .topRec_List li div:nth-child(10){ width:11%;}
 47             
 48             
 49             .apple a{display:block; text-decoration:none;}
 50             
 51             .apple,.aa{ width:90%; height:50px; overflow:hidden; margin:30px auto; border:1px solid #1B96EE;}
 52             .apple a,.aa a{ width:100%; height:50px; line-height:50px; text-indent:20px; color:#1B96EE;}
 53             .aa {word-wrap:break-word;line-height:50px;  color:#1B96EE;}
 54         </style>
 55     </head>
 56     
 57     <body>
 58         <div class="Top_Record">
 59             <!-- <div class="record_Top"></div> -->
 60             <div class="topRec_List">
 61                 
 62                 <div class="layui-form-item">
 63                 <input type="button" class="layui-btn layui-bg-blue" id="randomDraw" 
 64                 style="margin-left: 31%; margin-top: -71px; border-radius: 10px; position: absolute; width: 265px;height: 62px;font-size: 2em;" value="抽签"/>
 65                 </div>
 66                 
 67                 <table class="layui-table" style="text-align: center;width: 900px;height: 500px!important; margin: auto;margin-top: 100px;">
 68                     <thead style="text-align: center;">
 69                         <tr>
 70                             <td colspan="2" style="height: 40px;">小学</td>
 71                             <td colspan="2">初中</td>
 72                             <td colspan="2">高中</td>
 73                         </tr>
 74                         <tr>
 75                             <td style="height: 40px;">抽签编号</td>
 76                             <td>队伍编号</td>
 77                             <td>抽签编号</td>
 78                             <td>队伍编号</td>
 79                             <td>抽签编号</td>
 80                             <td>队伍编号</td>
 81                         </tr>
 82                     </thead>
 83                     <tbody>
 84                         <tr style="text-align: center;">
 85                             <td>
 86                                 <div class="maquee">
 87                                     <ul>
 88                                         <li>PW_A01</li>
 89                                         <li>PW_A02</li>
 90                                         <li>PW_A03</li>
 91                                         <li>PW_A04</li>
 92                                         <li>PW_A05</li>
 93                                         <li>PW_A06</li>
 94                                         <li>PW_A07</li>
 95                                         <li>PW_A08</li>
 96                                         <li>PW_A09</li>
 97                                         <li>PW_A10</li>
 98                                     </ul>
 99                                 </div>
100                             </td>
101                             <td>
102                                 <div class="maquee">
103                                     <li>ZA001</li>
104                                     <li>ZA012</li>
105                                     <li>ZA003</li>
106                                     <li>ZA021</li>
107                                     <li>ZA005</li>
108                                     <li>ZA008</li>
109                                     <li>ZA017</li>
110                                     <li>ZA028</li>
111                                     <li>ZA019</li>
112                                     <li>ZA010</li>
113                                 </div>
114                             </td>
115                             <td>
116                                 <!-- <div class="maquee">
117                                     <ul>
118                                         <li>PW_A01</li>
119                                         <li>PW_A02</li>
120                                         <li>PW_A03</li>
121                                         <li>PW_A04</li>
122                                         <li>PW_A05</li>
123                                         <li>PW_A06</li>
124                                         <li>PW_A07</li>
125                                         <li>PW_A08</li>
126                                         <li>PW_A09</li>
127                                         <li>PW_A10</li>
128                                     </ul>
129                                 </div> -->
130                             </td>
131                             <td>
132                                 <!-- <div class="maquee">
133                                     <li>ZA001</li>
134                                     <li>ZA012</li>
135                                     <li>ZA003</li>
136                                     <li>ZA021</li>
137                                     <li>ZA005</li>
138                                     <li>ZA008</li>
139                                     <li>ZA017</li>
140                                     <li>ZA028</li>
141                                     <li>ZA019</li>
142                                     <li>ZA010</li>
143                                 </div> -->
144                             </td>
145                             <td>
146                                 <div class="maquee">
147                                     <ul>
148                                         <li>PW_A01</li>
149                                         <li>PW_A02</li>
150                                         <li>PW_A03</li>
151                                         <li>PW_A04</li>
152                                         <li>PW_A05</li>
153                                         <li>PW_A06</li>
154                                         <li>PW_A07</li>
155                                         <li>PW_A08</li>
156                                         <li>PW_A09</li>
157                                         <li>PW_A10</li>
158                                     </ul>
159                                 </div>
160                             </td>
161                             <td>
162                                 <div class="maquee">
163                                     <li>ZA001</li>
164                                     <li>ZA012</li>
165                                     <li>ZA003</li>
166                                     <li>ZA021</li>
167                                     <li>ZA005</li>
168                                     <li>ZA008</li>
169                                     <li>ZA017</li>
170                                     <li>ZA028</li>
171                                     <li>ZA019</li>
172                                     <li>ZA010</li>
173                                 </div>
174                             </td>
175                         </tr>
176                         
177                     </tbody>
178                     
179                 </table>
180             </div>
181         </div>
182 
183         <script type="text/javascript">
184             function autoScroll(obj) {
185                 $(obj).find("ul").animate({
186                     marginTop: "-39px"
187                 }, 10, function() {
188                     $(this).css({
189                         marginTop: "0px"
190                     }).find("li:first").appendTo(this);
191                 })
192             }
193             
194             $(function() {
195                 var scroll = setInterval('autoScroll(".maquee")', 45); //45 时间越小速度越快
196                 $("#randomDraw").click(function(){//点击抽签按钮时 清除定时器 停止滚动
197                     console.log("aaa");
198                     clearInterval(scroll);
199                 }, function() {
200                     scroll = setInterval('autoScroll(".maquee")', 100);
201                 });
202             });
203         </script>
204     </body>
205 </html>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部