代码简单易懂。可以根据需求进行更改。
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; 265px;height: 62px;font-size: 2em;" value="抽签"/> 65 </div> 66 67 <table class="layui-table" style="text-align: center; 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>