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

最新推荐文章于 2025-08-22 11:32:18 发布

weixin_34223655

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量119

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/eggTwo/p/3479631.html

本文介绍了如何通过repeater绑定一个表格，并利用jquery实现表格内容的滚动显示效果，包括时间计数函数、隐藏与显示特定元素的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：使用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>

转载于:https://www.cnblogs.com/eggTwo/p/3479631.html