Jquery 实现 微博,消息向上滚动

微博向上滚动Demo,此实例不是仿新浪。

 
<!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>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style>
	body{
			background-color:#FFF;
	}
    .commentBox {
    float: left;
    font-family: tahoma;
    height: 278px;
    margin-top: 15px;
    overflow: hidden;
    position: relative;
    width: 250px;
	border:2px solid #09F;
 }
 .commentBox-content {
    float: left;
    position: relative;
    top: 0;
    width: 230px;
}
.commentBox-item {
    border-bottom: 1px dashed #E3E3E3;
    padding: 5px 0;
	
}
.commentBox-item p {
    color: #F63;
    line-height: 20px;
}
	
</style>
</head>

<body>
	<h3>Up Scroll Demo</h3>
    
    <div class="commentBox">
		<div class="commentBox-content">   

		
             <div class="commentBox-item">
                <p>第一楼:床前明月光,疑是地上霜,举头望明月,低头思故乡。</p>
             </div>
             
             <div class="commentBox-item">
                <p>第二楼:我不知道</p>
             </div>
             <div class="commentBox-item">
                <p>第三楼:基础理论扎实,讲课思路清晰、重点突出,逻辑鲜明,根据多年来对考研英语规律的研究,讲课能够切中考点,并将答题方法与技巧娓娓道来,让考生利用最少的时间掌握最有效的应试技巧,帮助广大考生顺利步入成功的大门!</p>
             </div>
             <div class="commentBox-item">
                <p>第四楼:本课程针对2014年考研英语翻译,通过五年翻译真题,全面剖析长难句,让考生在掌握翻译方法的同时掌握阅读和长难句;教考生如何分析长难句、翻译长难句;将英语句法体系融入到长难句的讲解之中,保证学生不觉枯燥地掌握英语句法,让考生在长难句翻译上一次通关:</p>
             </div>
	     </div>
 
	</div>
    
    <script>
 	
	setTimeout(change,3000); 
	function upscroll(){
		var content = $(".commentBox-content");
		var offset = ($(".commentBox-content").find(".commentBox-item").eq(0).height()+5)*-1 + "px";
		content.stop().animate({top:offset},1000,function(){
			var first = $(".commentBox-item").first();
			$(".commentBox-content").append(first);
			$(".commentBox-content").css("top","0px");
		});
		
		setTimeout(change,3000);
	}
	
	function change(){
		upscroll();
	}
 </script>
</body>
</html>

你可能感兴趣的:(jquery,js滚动,垂直滚动,向上循环滚动)