在做東西時要求讓數據滾動，且滾動到最后一條時，從頭再開始滾動，樣圖如下：
在網上搜了好多資料都沒法做到重新從第一條開始滾動。只是找到了如何讓table滾動，但是，這個效果也不是我想要的，因為這個效果是一直滾動，無法再滾動到最后一條后再從第一條開始滾動。
代碼如下：
<script type="text/javascript">
if ($("#ticker").height() > 715) { //715為DIV的高度
scroll();
}
function scroll() {
t = setInterval("show()", 1000) //1000滾動時間間隔為1秒 如要改動，下面1000也要跟着改動
$("#ticker").mouseover(function () {
clearInterval(t);
}).mouseout(function () {
t = setInterval("show()", 1000);
});
}
function show() {
$("#ticker tr:first").appendTo($("#ticker"));
}
</script>
無法達到預期效果，只能再另想辦法，找資料也找不到，頭疼了好久，最后想出一個辦法，從table的行數上下手，先數出未滾動前的行數，賦值給sum,然后每滾動一條，sum++，當sum等於table總行數的時候，再重新刷新頁面，就能達到我想要的效果了。
代碼如下(數據亂添的，大家不要在意)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title></title> <script src="/Jqwidgets/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <style type="text/css"> table{border-collapse:collapse;border-spacing:0;border-left:1px solid #000000;border-top:1px solid #000000; font-size:15px;font-weight:bold; } td{border-right:1px solid #000000;border-bottom:1px solid #000000;padding:5px 15px;} #Marquee{overflow:hidden;margin:0 auto;} </style> </head> <body > <form id="form1" runat="server"> <div id="Marquee" style="width: 80%; height: 715px"> <table id="ticker" width="100%" border="1" style="height:50px; vertical-align:middle;"> <tr style="font-weight:bold; font-size:15px; background-color:Gray"><td width="25%" style="border-right:0px;border-left:0px;">商品</td><td width="25%" style="border-right:0px;border-left:0px;">貨位</td><td width="25%" style="border-right:0px;border-left:0px;">日期</td><td width="25%" style="border-left:0px;">狀態</td></tr> <tr style='font-weight:bold;'><td width='25%'>大白菜 </td><td width='25%'>A1</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>青菜 </td><td width='25%'>A2</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>土豆 </td><td width='25%'>A3</td><td width='25%'>2015/6/10 </td><td width='25%'>不合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>蘋果 </td><td width='25%'>A4</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>蘋果 </td><td width='25%'>A4</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>嗡嗡嗡 </td><td width='25%'>A6</td><td width='25%'>2015/6/11 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>蘋果 </td><td width='25%'>A4</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>蘋果 </td><td width='25%'>A4</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>冷鮮豬肉(白條) </td><td width='25%'>A5</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>蘋果 </td><td width='25%'>A4</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>里 </td><td width='25%'>a</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>里 </td><td width='25%'>a</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>里 </td><td width='25%'>a</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> <tr style='font-weight:bold;'><td width='25%'>里 </td><td width='25%'>a</td><td width='25%'>2015/6/10 </td><td width='25%'>合格</td></tr> </table> </div> <script type="text/javascript"> var sum = 22; //sum為未滾動前顯示的行數 if ($("#ticker").height() > 715) { //715為DIV的高度 scroll(); } function scroll() { t = setInterval("show()", 1000) //1000滾動時間間隔為1秒 如要改動，下面1000也要跟着改動 $("#ticker").mouseover(function () { clearInterval(t); }).mouseout(function () { t = setInterval("show()", 1000); }); } function show() { $("#ticker tr:first").appendTo($("#ticker")); sum = sum + 1; if (sum == 35) { //35為table數據總行數 setTimeout(function () { window.location.reload(); }, 500); //500為滾動到最后一條之后0.5秒后刷新頁面 } } </script> </form> </body> </html>
這是我想到的一個蠢辦法，不知道大家有沒有更好的，希望能夠跟大家分享一下，在這里先謝謝慷慨的大俠！