JQ简洁版彷微博列表滚动效果
彷新浪微博滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>彷新浪微博滚动效果</title>
<style type="text/css">
body { margin:0; font-size:12px; font-family:"微软雅黑","宋体"; color:#555; }
.roll { overflow:hidden; width:400px; height:296px; padding:10px; border:1px solid #ccc; margin:50px auto; }
.roll_list { margin:0; padding:0; list-style:none; }
.roll_list li { padding-top:10px; border-bottom:1px dotted #ccc; }
.roll_avatar { overflow:hidden; float:left; width:50px; height:50px; padding:1px; border:1px solid #eee; margin-right:10px; }
.roll_cnt { display:table-cell; width:1000px; }
.roll_cnt_tit { margin:0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div class="roll">
<ul class="roll_list">
<li>
<a class="roll_avatar" href="#"><img src="http://pic4.nipic.com/20090915/3035279_192853029499_2.jpg" alt="" /></a>
<div class="roll_cnt">
<h2 class="roll_cnt_tit">君不见，黄河之水天上来，奔流到海不复回。</h2>
<p class="roll_cnt_word">与君歌一曲，请君为我侧耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
</div>
</li>
<li>
<a class="roll_avatar" href="#"><img src="http://pica.nipic.com/2007-12-05/200712522335975_2.jpg" alt="" /></a>
<div class="roll_cnt">
<h2 class="roll_cnt_tit">君不见，高堂明镜悲白发，朝如青丝暮成雪。</h2>
<p class="roll_cnt_word">与君歌一曲，请君为我侧耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
</div>
</li>
<li>
<a class="roll_avatar" href="#"><img src="http://pic4.nipic.com/20090915/3035279_192853029499_2.jpg" alt="" /></a>
<div class="roll_cnt">
<h2 class="roll_cnt_tit">李白将进酒人生得意须尽欢，莫使金樽空对月。</h2>
<p class="roll_cnt_word">与君歌一曲，请君为我侧耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
</div>
</li>
<li>
<a class="roll_avatar" href="#"><img src="http://www.emenpiao.com/UpLoadFile/ImageStore/ArticleImages/cb51aeac-2019-456f-9eb5-13330849319a.jpg" alt="" /></a>
<div class="roll_cnt">
<h2 class="roll_cnt_tit">天生我材必有用，千金散尽还复来。</h2>
<p class="roll_cnt_word">与君歌一曲，请君为我侧耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
</div>
</li>
<li>
<a class="roll_avatar" href="#"><img src="http://pic4.nipic.com/20090915/3035279_192853029499_2.jpg" alt="" /></a>
<div class="roll_cnt">
<h2 class="roll_cnt_tit">烹羊宰牛且为乐，会须一饮三百杯。</h2>
<p class="roll_cnt_word">与君歌一曲，请君为我侧耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
</div>
</li>
<li>
<a class="roll_avatar" href="#"><img src="http://pic9.nipic.com/20100917/389213_145704016348_2.jpg" alt="" /></a>
<div class="roll_cnt">
<h2 class="roll_cnt_tit">岑夫子，丹丘生，将进酒，杯莫停。</h2>
<p class="roll_cnt_word">与君歌一曲，请君为我侧耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
var timer = null;
if(!null){
timer = window.setInterval(rolling,3000);
}
function rolling(){
var roll= $(".roll_list");
var liHeight = roll.find("li:first").height()+11;
roll.animate({marginTop:liHeight+'px'},1000,function(){
$(this).find("li:last").prependTo($(this));
$(this).find("li:first").hide();
$(this).css({marginTop:0});
$(this).find("li:first").fadeIn(1000);
})
}
$(".roll_list li").hover(function(){
clearInterval(timer);
},function(){
timer = window.setInterval(rolling,3000);
})
})
</script>
</body>
</html>
