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>