Question

我正在尝试使用与此网站类似的效果的内容滑块：Monitter

与本网站不同，我不想包含任何实时的Twitter更新。我只是希望div中的内容以类似的方式加载。

我已经查看了各种具有垂直内容滑块的jquery插件，但它们似乎都没有达到预期的效果。

最后，我不是在寻找整个代码，而只是寻求一些帮助，以便我可以开始朝着正确的方向努力。

编辑：连续div之间需要有一段时间延迟，以便用户可以浏览每个div中的内容。

编辑：我想这次我应该用一些代码示例来澄清。我很抱歉没有为此事做好准备：以下是 jsondata.php 文件

中的示例数据

<?php
   $json = '{
        "userdata": [
            {
                "first":"James",
                "last":"Watt",
                "email":"jw@abc.edu",
                "city":"xyz"
            },
            {
                "first":"Isaac",
                "last":"Newton",
                "email":"int@def.edu",
                "city":"xyz"
            },
            {
                "first":"Albert",
                "last":"Einstein",
                "email":"ae@ghi.edu",
                "city":"xyz"
            }
                      ]
                   }';
                 echo $json;
?>

以下是 index.html 文件：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="style2.css" />
        <script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#loaduserdata").click(function(){
                $("#info").empty(); 
            $.getJSON(
            "jsondata.php",
            function(data){
                $.each(data.userdata, function(i,user){
                    var html = '<div class="entry">';
                        html += "<p>"+user.first+"</p>";
                        html += "<p>"+user.last+"</p>";
                        html += "<p>"+user.email+"</p>";
                        html += "<p>"+user.city+"</p>";
                        html += '</div>';
                    $(html).appendTo('#info');
                });
            });
    });

});
        </script>
    </head>
    <body>
        <a href="#" id="loaduserdata">User Data</a>
        <div id="info"></div>
    </body>
</html>

现在，单击用户数据将使用类条目快速填充div中的所有数据。我正在寻找的是以类似于monitter网站的方式填充数据，也就是说，数据应该以一段时间延迟缓慢填充。这是一些示例代码。如果我朝错误的方向前进，请纠正我。

Answer 1

我就是这样做的（demo here）......实际的代码包含在addRow函数中。我在内容中添加了一个简单的“插入日期”，您可以使用ajax来检索任何内容。

其余代码用于演示目的，主要是因为我不喜欢div从屏幕上移开，所以我在每列中添加了最多#div。

CSS

#wrapper { position: relative; left: 0; top: 0; width: 600px; margin: 0 auto; text-align: center; }
.column { position: relative; float: left; padding: 0; width: 50%; }
.column div { background: #eee; border: #333 1px solid; margin: 5px; padding: 5px; }
.column .top { background: #ccc; }
.newrow { display: none; }

HTML

<input type="button" rel="col1" style="margin: 5px; float: right;" value="Add row to right" />
<input type="button" rel="col0" style="margin: 5px; float: right;" value="Add row to left" />
<input type="button" rel="both" style="margin: 5px; float: right;" value="Add row to both" />

<div id="wrapper">
 <div id="col0" class="column"><div class="top">Content added below</div></div>
 <div id="col1" class="column"><div class="top">Content added below</div></div>
</div>

脚本

$(document).ready(function(){
 var maxRows = 10;
 $(':button').click(function(){
  var el = $(this).attr('rel');
  if ( el=="both" ) { el="col1"; addRow("col0"); }
  addRow(el);
  // remove extra rows
  $('#wrapper').find('.column').each(function(){
   $(this).find('.row:gt(' + maxRows + ')').remove();
  })
 });
})

function addRow(el){
 // get whatever contents here
 var content = (new Date).toString();
 // add new row
 $('#'+el).find('.top').after('<div class="newrow row">' + content + '</div>')
 $('.newrow').fadeIn('slow',function(){ $(this).removeClass('newrow') });
}

更新：好的，我看到你没有要求代码，但是我只是在一起......它应该更符合你的想法。

假设这个json结构：

({
 "news": [
  { "id" : "0010", "date" : "Sun Dec 20 2009 12:10:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 10" },
  { "id" : "0009", "date" : "Sun Dec 20 2009 12:09:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 9" },
  { "id" : "0008", "date" : "Sun Dec 20 2009 12:08:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 8" },
  { "id" : "0007", "date" : "Sun Dec 20 2009 12:07:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 7" },
  { "id" : "0006", "date" : "Sun Dec 20 2009 12:06:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 6" },
  { "id" : "0005", "date" : "Sun Dec 20 2009 12:05:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 5" },
  { "id" : "0004", "date" : "Sun Dec 20 2009 12:04:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 4" },
  { "id" : "0003", "date" : "Sun Dec 20 2009 12:03:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 3" },
  { "id" : "0002", "date" : "Sun Dec 20 2009 12:02:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 2" },
  { "id" : "0001", "date" : "Sun Dec 19 2009 12:01:00 GMT-0500 (Eastern Standard Time)", "title" : "News item 1" }
 ]
})

CSS（与之前相同）

HTML

<div id="wrapper">
 <div class="column"><div class="top">Content added below</div></div>
</div>

脚本

$(document).ready(function(){
 initData();
})

function initData(){
 var o = {
  maxRows: 10, // max # of rows to show
  updateJSON : 15, // update data every 30 seconds
  updateScreen : 1, // update screen every 2 seconds with data

  count: 0, // count # of cycles of setTimeout
  lastID: -1, // last news ID
  debug: false // debug
 };
 var cycle;
 if (o.debug) $('#wrapper').prepend('<div id="debug"></div>')
 getData( [] );

 function addRow(content){
  // update data if this function has cycled 30/2 times - so we only use one settimeout function
  o.count++;
  if ( o.debug ) $('#debug').html('seconds passed = ' + o.count*o.updateScreen + ', content.length = ' + content.length);
  if ( o.count >= o.updateJSON/o.updateScreen ) {
   o.count = 0;
   getData(content);
  }

  if ( content.length > 0) {
   // remove last array element
   var n = content.pop();
   // if content length is zero, the set last ID
   if (content.length === 0) o.lastID = n[0];
   // add new row, rel contains the id - not used by the script, but there if you need it.
   $('#wrapper').find('.top').after('<div class="newrow row" rel="' + n[0] + '">' + n[2] + '<br />' + n[1] + '</div>');
   $('.newrow').fadeIn('slow', function(){ $(this).removeClass('newrow') });
  }
  $('#wrapper').find('.row:gt(' + (o.maxRows-1) + ')').remove();
  cycle = setTimeout( function(){ addRow(content) } , o.updateScreen * 1000 );
 }

 function getData(content){
  var tmparray = [];
  var lastIDfound = false;
  $.ajax({
   type: "GET",
   url: "newsitems.js",
   dataType: "json",
   success: function(data) {
    $.each(data.news, function(news){
     if (this.id == o.lastID) lastIDfound = true;
     if (!lastIDfound){
     // return month day year time (assuming US notation)
      var newsDate = this.date.split(' ').slice(1,5);
      // get today's month day year
      var today = new Date().toString().split(' ').slice(1,4).join(' ');
      // show only the time if the date is today
      var newsTime = (newsDate.slice(0,3).join(' ') == today ) ? 'posted at ' + newsDate[3] : 'from ' + newsDate.join(' ');
      tmparray.push([ this.id, newsTime, this.title ]);
     }
    });
    // if tmparray length is zero, then return
    if (tmparray.length === 0) return;
    // if last item shown hasn't changed, then return with no new data
    if (tmparray[0][0] == o.lastID) return;
    // set last ID
    if (o.lastID == -1) o.lastID = tmparray[0][0];
    clearTimeout(cycle);
    if (content.length === 0) {
     addRow( tmparray );
    } else {
     addRow( content.concat( tmparray ) );
    }
   },
   error: function(XMLHttpRequest, textStatus, errorThrown) {
    if (!$('#error').length) $("#wrapper").prepend('<div id="error"></div>');
    $('#error').html(errorThrown + '<br />');
   }
  })
 }
}

Answer 2

我将假设您使用AJAX加载数据（通过AJAX获取新DIV的内容）。然后你可以做这样的事情：

编辑：根据你的评论你可以使用这样的东西。我没有测试过代码，但逻辑就在那里（只是希望我没有弄乱一些东西:)）：

var lastAddedTime = null;

function addNewDiv ( response ) {
    var timeNow = new Date ().getTime ();
    if ( lastAdded === null || ( timeNow - lastAddedTime ) > 5000 ) {
        // depending on what response is build your DIV
        // it could be HTML or JSON from which you generate HTML
        var newDiv = $( response );
        newDiv.css ( 'display', 'none' );

        newDiv.prependTo ( $( 'selector for your container' ) );
        newDiv.fadeIn ( 'slow' );
        lastAddedTime = timeNow;
    } else {
        setTimeout ( function () { addNewDiv ( response ); }, 5001 );
    }
}

$.get (
    'get_data.php',
    {
        // your parameters
    },
    function ( response ) {
        addNewDiv ( response );
    }
);

5000毫秒是5秒，如果您想要更短的间隔进行更新，请调整

jquery内容滑块

2 个答案: