How to make a scroll news like Top Tweets in twitter homepage? (php)_问答_开发者

How to make a scroll news like Top Tweets in twitter homepage? (php)

开发者 https://www.devze.com 2023-02-06 16:43 出处：网络

I want to make a site use wp, and I want add a scroll news like Top Tweets in twitter homepa开发者_如何学Cge. 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

Using Jquery you can make a div slide in and slide out of view. http://docs.jquery.com/UI/Effects/Slide#overview.

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>";

THis updates every second.. which is a bit fast ... so you should set it to something like 7000 milliseconds. demo