<!DOCTYPE html>
<html><head>
<meta charset="utf-8"> <title></title> <style type="text/css"> .message{ font-size:12px;color: red; border-bottom: 1px dashed #CCCCCC; margin-bottom: 5px;;} table { border-collapse: collapse; border-spacing: 0px; border: none; width: 600px; } td { border: 1px solid #CCCCCC; } .title { background-color: #EAEAEA; color: #333333; } .rollDiv { padding: 1px; overflow: hidden; height: 100px; } .rollDiv table td { font-size: 12px; border: none; } </style> <script src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript"> $(function() { $(".rollContent").css("margin-top","0px");///很重要，IE9以下的没有此行代码无法正常运行 var count1=0; $(".rollDiv").height($(".rollContent").height()); var rollCount = 0; var content = $(".rollContent").html(); $(".rollContent").append(content); setInterval(function() { ++rollCount; if ($(".rollContent").children().first().height() == rollCount) { $(".rollContent").append(content); $(".rollContent").children().first().remove(); $(".rollContent").css({ "margin-top": "+=" + rollCount }); rollCount = 0; } $(".rollContent").css({ "margin-top": "-=" + 1 }); }, 100); }); </script> </head><body>
<div class="message">内容循环滚动的表格</div> <div> <table> <tr class="title"> <td>姓名</td> <td>姓名</td> <td>姓名</td> <td>姓名</td> <td>姓名</td> <td>姓名</td> </tr> <tr> <td colspan="6"> <div class="rollDiv"> <div class="rollContent"> <table> <tr> <td>姓名1</td> <td>姓名1</td> <td>姓名1</td> <td>姓名1</td> <td>姓名1</td> <td>姓名1</td> </tr> <tr> <td>姓名2</td> <td>姓名2</td> <td>姓名2</td> <td>姓名2</td> <td>姓名2</td> <td>姓名2</td> </tr> <tr> <td>姓名3</td> <td>姓名3</td> <td>姓名3</td> <td>姓名3</td> <td>姓名3</td> <td>姓名3</td> </tr> <tr> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> </tr> <tr> <td>姓名5</td> <td>姓名5</td> <td>姓名7</td> <td>姓名8</td> <td>姓名4</td> <td>姓名43</td> </tr> <tr> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> </tr> <tr> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> </tr> <tr> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> </tr> <tr> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> </tr> <tr> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> </tr> <tr> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> </tr> <tr> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> </tr> <tr> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> <td>姓名4</td> </tr> </table> </div> </div> </td> </tr> </table> </div> </body></html>