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

微博向上滚动Demo

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/zb0423/blog/79972

文章标签：

#javascript #xhtml #python #ViewUI

本文提供了一个使用jQuery实现的微博向上滚动效果的示例代码。该Demo包含完整的HTML结构及JavaScript逻辑，通过定时调整评论框中内容的位置实现滚动效果。

2019独角兽企业重金招聘Python工程师标准>>>

微博向上滚动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>

转载于:https://my.oschina.net/zb0423/blog/79972