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

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

 1 <table width="530" id="rollBar">
 2                      <asp:Repeater ID="rptForYou" runat="server">
 3                 <ItemTemplate>               
 4                      <tr>
 5                         <td width="100" height="45">
 6                             <div class="list bgcolor_f3 margin_10b tc"><%#Eval("Province") %></div>
 7                         </td>
 8                         <td width="100">
 9                             <div class="list bgcolor_f3 margin_10b tc"><%#Eval("City") %></div>
10                         </td>
11                         <td width="100">
12                             <div class="list bgcolor_f3 margin_10b tc"><%#Eval("District") %></div>
13                         </td>
14                         <td width="290">
15                             <div class="list bgcolor_f3 margin_10b padding_10l"><%#GetShowCompanyName(Eval("CompanyName"),Eval("MasterName")) %></div>
16                         </td>
17                     </tr>
18                 </ItemTemplate>
19                 </asp:Repeater>
20                    
21                 </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>

　　

posted @ 2013-12-18 08:39  梦亦晓  阅读(555)  评论(0)  编辑  收藏  举报