如何使像顶推文滚动新闻的Twitter主页? (PHP) [英] How to make a scroll news like Top Tweets in twitter homepage? (php)

查看:158
本文介绍了如何使像顶推文滚动新闻的Twitter主页? (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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆