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>