前台JQ：文章列表滚动效果(仿微博即时更新效果)

chen'mo

2013-02-08 / 0 评论 / 3,755 阅读 / 正在检测是否收录...

02/08

温馨提示：

本文最后更新于1970年01月01日，已超过20042天没有更新，若内容或图片失效，请留言反馈。

<head></head>之间加入

<style>
/*列表滚动*/
.roll { overflow:hidden; height:273px;}/*定义生效容器高度每条高度的整数倍*/
.popular_list{}  /*定义列表页容器样式*/  
.popular_list .article {height:91px;overflow:hidden;} /*定义单条容器样式 */  
</style>
<script src="/js/jquery.min.js"></script>

<body></body>之间的构造

<!--▼生效区域-->
<div class="roll">
<!--▼列表容器-->
<div class="popular_list">
<div class="article"><!--此处单条文章内容--></div>
<!--循环省略……-->
</div>
<!--▲列表容器-->
</div>
<!--▲生效区域-->

<!--▼JS代码-->
<script type="text/javascript">
$(function(){
var timer = null;
if(!null){
timer = window.setInterval(rolling,3000);
}
function rolling(){
var roll= $(".popular_list");//指定列表页容器
var liHeight = roll.find("div.article:first").height()+11;
$(this).find("div.article:first").hide();
$(this).css({marginTop:0});
$(this).find("div.article:first").fadeIn(1000);
})
}
$(".popular_list div.article").hover(function(){
clearInterval(timer);
},function(){
timer = window.setInterval(rolling,3000);
})
})
</script>
<!--▲JS代码-->

需要的文件

http://www.iaeweb.com/js/jquery.min.js

PS：

这个效果可以运用到最新消息和最新评论之类的

让人感觉此站即时性高其实就是那回事这个效果让有限的版面提供更多的内容

应该对SEO有好处和滑动门功效一样

来源：http://bbs.akcms.com/forum.php?mod=viewthread&tid=4056&extra=page%3D2