JQuery实现资讯上下滚动悬停效果

第一步：使用repeater绑定一个table。

 <table width="530" id="rollBar">
                      <asp:Repeater ID="rptForYou" runat="server">
                 <ItemTemplate>
                      <tr>
                         <td width="100" height="45">
                             <div class="list bgcolor_f3 margin_10b tc"><%#Eval("Province") %></div>
                         </td>
                         <td width="100">
                             <div class="list bgcolor_f3 margin_10b tc"><%#Eval("City") %></div>
                         </td>
                         <td width="100">
                             <div class="list bgcolor_f3 margin_10b tc"><%#Eval("District") %></div>
                         </td>
                         <td width="290">
                             <div class="list bgcolor_f3 margin_10b padding_10l"><%#GetShowCompanyName(Eval("CompanyName"),Eval("MasterName")) %></div>
                         </td>
                     </tr>
                 </ItemTemplate>
                 </asp:Repeater>

                 </table>

第二步：jquery实现特效。

   <script type="text/javascript">
                function TimeCount() {
                    $("#rollBar tr").first().remove().appendTo("#rollBar");
                    $("#rollBar tr:lt(7)").show();
                    $("#rollBar tr:gt(6)").hide();
                }
                var t;
                window.onload = function () {
                    $("#rollBar tr:lt(7)").show();
                    $("#rollBar tr:gt(6)").hide();
                    t= setInterval(TimeCount, 1000);

                    $("#rollBar").hover(function(){
                        clearInterval(t);
                        $("#rollBar tr:lt(7)").show();
                        $("#rollBar tr:gt(6)").hide();
                    },function(){
                        t= setInterval(TimeCount, 1000);
                    });
                }
            </script>