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

2013-2-8 chenmo 网站建设

<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

标签: AKCMS 代码修改 文章列表即时更新效果

Powered by emlog 湘ICP备13007859号 空间由景安网络赞助