如何使像顶推文滚动新闻的Twitter主页? (PHP) [英] How to make a scroll news like Top Tweets in twitter homepage? (php)
问题描述
我想打一个网站使用WP,我想补充像顶推文滚动新闻的Twitter主页。当自定义发布一个新回信在我的页面上的每一个部分,新的主题将DISPLY在这个滚动新闻的一部分。他们都来自最新的10个项目的数据库。如何做到这一点?谢谢
I want to make a site use wp, and I want add a scroll news like Top Tweets in twitter homepage. when the custom post a new replys in every part of my page, the new topics will disply in this scroll news part. they all come from latest 10 items of database. How to do that? Thanks
推荐答案
使用jQuery你可以在一个div幻灯片,幻灯片拿出来看。 http://docs.jquery.com/UI/Effects/Slide#overview
Using Jquery you can make a div slide in and slide out of view. http://docs.jquery.com/UI/Effects/Slide#overview.
然后你给每个div每个包含从数据库评论一个唯一的ID。初始化格0,1,2为可见光和3-9为隐藏。这里的JavaScript结构:
Then you give each div a unique id each containing a comment from your database. Initialize div 0,1,2 as visible and 3-9 as hidden. Here the javascript structure:
echo <<<CONTENT
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
k=1;
setInterval("livefeed(k++)",1000);
function livefeed(i){
slide(i);
}
function slide(i){
addTop((i+3)%10);
removeBottom(i%10);
var j=((i-1)%10);
$('.livefeed').prepend($("#"+j));
}
function addTop(i){
var e=document.getElementById(i);
$("#"+i).fadeIn(1000);
}
function removeBottom(i){
$("#"+i).fadeOut(1000);
}
</script>
</head>
<body>
CONTENT;
echo "<div class='livefeed'>";
for($i=9;$i>=0;$i--){
if($i<4&&$i>0){
echo "<div id='".$i."' >This is comment $i from the database</div>";
}else{
echo "<div style='display:none' id='".$i."' >This is comment ".$i." from the database</div>";
}
}
echo "</div>";
该更新的每一秒......这是一个有点太快了,所以你应该将其设置为类似7000毫秒。 演示
THis updates every second.. which is a bit fast ... so you should set it to something like 7000 milliseconds. demo
这篇关于如何使像顶推文滚动新闻的Twitter主页? (PHP)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!