zoukankan      html  css  js  c++  java
  • 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>
    

      

    作者:梦亦晓,转载请注明出处
    如果此文能给您提供帮助,请点击右下角的【推荐
    如果您对此文有不同的见解或者意见,欢迎留言讨论
  • 相关阅读:
    ubuntu
    什么是守护进程?
    Redis 简介
    什么是原子性,什么是原子性操作?
    什么是BSD协议?
    查看内存
    数据库备份与还原
    PostgreSQL 判断字符串包含的几种方法
    SQL 基础
    手风琴-过渡效果,显示隐藏列表案例
  • 原文地址:https://www.cnblogs.com/eggTwo/p/3479631.html
Copyright © 2011-2022 走看看