在做东西时要求让数据滚动,且滚动到最后一条时,从头再开始滚动,样图如下:
在网上搜了好多资料都没法做到重新从第一条开始滚动。只是找到了如何让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>
这是我想到的一个蠢办法,不知道大家有没有更好的,希望能够跟大家分享一下,在这里先谢谢慷慨的大侠!