Layui table表格无缝向上滚动

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

   

  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             
 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_A01li>
 89                                         <li>PW_A02li>
 90                                         <li>PW_A03li>
 91                                         <li>PW_A04li>
 92                                         <li>PW_A05li>
 93                                         <li>PW_A06li>
 94                                         <li>PW_A07li>
 95                                         <li>PW_A08li>
 96                                         <li>PW_A09li>
 97                                         <li>PW_A10li>
 98                                     ul>
 99                                 div>
100                             td>
101                             <td>
102                                 <div class="maquee">
103                                     <li>ZA001li>
104                                     <li>ZA012li>
105                                     <li>ZA003li>
106                                     <li>ZA021li>
107                                     <li>ZA005li>
108                                     <li>ZA008li>
109                                     <li>ZA017li>
110                                     <li>ZA028li>
111                                     <li>ZA019li>
112                                     <li>ZA010li>
113                                 div>
114                             td>
115                             <td>
116                                 
130                             td>
131                             <td>
132                                 
144                             td>
145                             <td>
146                                 <div class="maquee">
147                                     <ul>
148                                         <li>PW_A01li>
149                                         <li>PW_A02li>
150                                         <li>PW_A03li>
151                                         <li>PW_A04li>
152                                         <li>PW_A05li>
153                                         <li>PW_A06li>
154                                         <li>PW_A07li>
155                                         <li>PW_A08li>
156                                         <li>PW_A09li>
157                                         <li>PW_A10li>
158                                     ul>
159                                 div>
160                             td>
161                             <td>
162                                 <div class="maquee">
163                                     <li>ZA001li>
164                                     <li>ZA012li>
165                                     <li>ZA003li>
166                                     <li>ZA021li>
167                                     <li>ZA005li>
168                                     <li>ZA008li>
169                                     <li>ZA017li>
170                                     <li>ZA028li>
171                                     <li>ZA019li>
172                                     <li>ZA010li>
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>

 

转载于:https://www.cnblogs.com/yirenipeng/p/10740004.html

你可能感兴趣的:(Layui table表格无缝向上滚动)