JQuery实现资讯上下滚动悬停效果
2013-12-18 08:39
1141 查看
第一步:使用repeater绑定一个table。
第二步:jquery实现特效。
<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>
相关文章推荐
- 如何使用jquery实现文字上下滚动效果
- jquery 实现上下滚动效果示例代码
- jquery实现文字上下循环滚动效果
- 移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
- jquery实现:页面上下滚动效果
- jquery实现文字的上下滚动效果
- jquery实现文字上下滚动效果
- 使用jquery实现文字滚动,鼠标悬停效果
- js实现文字垂直滚动和鼠标悬停效果
- 新闻滚动效果JQuery实现
- 利用jQuery实现一个简单的表格上下翻页效果
- jquery实现多行文字图片滚动效果示例代码
- jQuery向下滚动即时加载内容实现的瀑布流效果
- jquery实现的视差滚动教程(视差大背景效果)
- jquery实现单行滚动效果
- JQuery实现文字无缝滚动效果(Marquee插件)
- JQuery实现数字滚动增加的效果
- jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
- jquery实现多行文字图片滚动效果