<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
评论 (0)