js realisiert den Effekt des Scrollens und Anzeigens von Informationen, indem es Weibo_javascript-Fähigkeiten imitiert

Ich glaube, dass sich jeder, wenn er Freizeit hat, bei Weibo, Twitter und anderen sozialen Netzwerken anmelden wird. Jedes Mal, wenn ich mich bei Weibo anmelde, werde ich auf die Änderungen achten, einschließlich kleiner Änderungen im Layout und großer Änderungen API-Schnittstellen warten.

Wenn wir uns auf der Startseite bei Weibo anmelden, können wir eine Spalte mit dem Namen „Alle reden“ sehen, in der die aktuell von allen gesendeten Weibo-Beiträge angezeigt werden. Ich fand diesen Effekt ziemlich interessant, als ich ihn zum ersten Mal sah, also wir Ich werde es als nächstes hinzufügen. In diesem Artikel wird der Effekt des Scrollens und Anzeigens von Weibo-Informationen vorgestellt.

Wir haben Weibos „Everyone is Talking“ sorgfältig beobachtet. Es zeigt kontinuierlich Weibo an, indem es von oben nach unten scrollt, und jeden Tag wird neues Weibo durch den Einblendeffekt angezeigt.

Bild 1 Weibo „Alle reden“

1. Weibo-Plugin definieren
Als nächstes definieren wir ein Plug-in, um Weibo unter einem bestimmten Thema zu erhalten. Hier verwenden wir die Erweiterungsfunktion von jQuery, um ein jQuery-Plug-in für Weibo zu definieren

Da jQuery einen Mechanismus bereitstellt, mit dem Benutzer benutzerdefinierte Methoden und zusätzliche Funktionen zum Kernmodul hinzufügen können, können wir mit jQuery benutzerdefinierte Plug-Ins erstellen, die häufig verwendete Methoden kapseln und so unsere Entwicklungseffizienz verbessern.

Zuerst definieren wir eine selbstausführende Funktion (IIFE), übergeben dann das jQuery-Objekt als Parameter an die selbstausführende Funktion und stellen die entsprechende Beziehung zwischen „$“ und jQuery her, sodass „$“ funktioniert nicht darin ausgeführt werden Der Umfang wird von anderen Bibliotheken abgedeckt.

// Defines a jquery plugin.
; (function($) {
  $.fn.weiboSearch = function() {
    // your plugin logic
  };
})(jQuery);

Oben definieren wir eine selbstausführende Funktion (IIFE) und definieren darin eine Erweiterungsmethode weiboSearch().

Da die Weibo-API 2.0 eine Such-/Themenschnittstelle bietet, um Weibo unter einem bestimmten Thema zu durchsuchen, werden Daten im JSON-Format zurückgegeben.

Abbildung 2 Parameter der Weibo-Suchoberfläche

Aus dem obigen Bild wissen wir, dass die Weibo-Suchoberfläche den AppKey der Anwendung (Nicht-OAuth-Autorisierungsmethode) und das Themenschlüsselwort (q) bereitstellen muss.

Als nächstes definieren wir literale Objektstandards, die Attribute wie die URL der Weibo-Schnittstelle, den AppKey der Anwendung, das Themenschlüsselwort (q) und die Anzahl der auf einer einzelnen Seite zurückgegebenen Datensätze (Anzahl) enthalten. . Die spezifische Definition lautet wie folgt:

// Defines weibo defaults type.
$.fn.weiboSearch.defaults = {
  url: 'https://api.weibo.com/2/search/topics.json?q=',
  appKey: '5786724301',
  numWeibo: 15,
  term: ''
};

2. Cross-Origin-Anfrage senden
Wir können die Weibo-Suchschnittstelle aufrufen, indem wir eine Ajax-Anfrage senden. Wenn die Anfrage erfolgreich ist, gibt der Server Daten im JSON-Format an das Programm zurück, dann müssen wir die zurückgegebenen Daten der Seite präsentieren.

 $.getJSONP = function(s) {

  // Due to cross origin request, so we to use jsonp format.
  s.dataType = "jsonp";
  $.ajax(s);

  // figure out what the callback fn is
  var $script = $(document.getElementsByTagName('head')[0].firstChild);
  var url = $script.attr('src') || '';

  // Gets callback function
  var cb = (url.match(/callback=(\w+)/) || [])[1];

  if (!cb)
    return; // bail
  var t = 0, cbFn = window[cb];

  $script[0].onerror = function(e) {
    $script.remove();
    handleError(s, {}, "error", e);
    clearTimeout(t);
  };

  if (!s.timeout)
    return;

  window[cb] = function(json) {
    clearTimeout(t);
    cbFn(json);
    cbFn = null;
  };

  // Gets time out function flag.
  t = setTimeout(function() {
    $script.remove();
    handleError(s, {}, "timeout");
    if (cbFn)
      window[cb] = function() {
      };
  }, s.timeout);

  /**
  * Fix issue: "jQuery.handleError is not a function"
  */
  function handleError(s, xhr, msg, e) {
    s.error && s.error.call(s.context, xhr, msg, e);
    s.global && $.event.trigger("ajaxError", [xhr, s, e || msg]);
    s.complete && s.complete.call(s.context, xhr, e || msg);
  }
};

Oben haben wir die Methode getJSONP() definiert, die die Weibo-API durch Senden einer Ajax-Anfrage aufruft. Zu diesem Zeitpunkt müssen wir quellenübergreifende Daten über das JSONP-Format abrufen Ermöglicht die Integration von Skript-Tags und die Rückkehr zum Client, um einen domänenübergreifenden Zugriff in Form eines Javascript-Rückrufs zu erreichen.

Als nächstes definieren wir die private Methode grabWeibos() in der Methode $.fn.weiboSearch(), die für den Aufruf der getJSONP()-Methode und das Abrufen der zurückgegebenen JSON-Daten zur Anzeige auf der Seite verantwortlich ist.

/**
* Uses ajax request to grab weibos.
*/
function grabWeibos() {
  var url = opts.url;
  grabFlag = false;
  grabbing = true;

  $.getJSONP({
    url: url,
    timeout: 30000,
    data: {
      source: opts.appKey,
      q: opts.term,
      count: opts.numWeibo
    },
    error: function(xhr, status, e) {
    },
    complete: function() {
    },
    success: function(json) {
      if (json.error) {
        // Can't get results displays error.
        return;
      }

      // iterates weibo results
      $.each(json.data.statuses, function(i) {
        // Adds data to page.
      })
    }

  });
}

Oben haben wir grabWeibos() definiert, das die Methode getJSONP() aufruft und die Daten auf der Seite anzeigt, nachdem die Anfrage erfolgreich ist.

3. JSON-Datenverarbeitung
Jetzt haben wir grundsätzlich das Plug-in jquery.weibo.search.js implementiert, das zum Durchsuchen von Weibo unter einem bestimmten Thema verwendet wird. Aus Zeitgründen haben wir die Schnittstelle wie folgt gestaltet:

<!-- From design-->
<!DOCTYPE html>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/weibo.serach.style.css">
</head>
<body>
<table>
  <tbody>
  <tr>
    <td>
      <div id="weibo1" class="weibo">
      </div>
    </td>
    <td>
      <div id="weibo2" class="weibo">
      </div>
    </td>
  </tr>
  </tbody>
</table>
</body>
</html>

Als nächstes verweisen wir im Seitencode auf die jQuery-Bibliothek und das benutzerdefinierte Weibo-Themensuch-Plug-in. Der spezifische Code lautet wie folgt:

<!-- Adds Javascript reference -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.weibo.search.js"></script>

Oben haben wir direkt die von Google bereitgestellte jQuery-Bibliothek zitiert und sie in das Projekt eingeführt. Als nächstes haben wir den Code zum Aufrufen des Weibo-Themensuch-Plug-Ins hinzugefügt Element. Der spezifische Code lautet wie folgt:

<!-- When document ready invokes charCount function-->
<script type="text/javascript">
  // Invokes webioSearch function.
  $(document).ready(function () {
    $("#weibo1").weiboSearch({
      term:'情人节',
      direction:'down'
    });

    $("#weibo2").weiboSearch({
      term:'元宵节',
      direction:'up'
    });
  });
</script>

上面，我们在页面中调用了weiboSearch()的默认方法，并且搜索“情人节”话题下的微博。接下来，我们打开Chrome中Network选项，查看search/topics中的请求包含了source、count、q和callback（回调函数）参数。

图3 Ajax请求

由于Chrome中的JSON数据没有换行不便于查看，所以我们在Firefox中查看返回的JSON格式的数据。

图4微博JSON数据

上面的JSON数据不便于查看，这里我们使用JSON viewer格式化微博数据，格式化后的数据如下：

图5格式化的JSON数据

通过上图，我们发现微博数据包含在try/catch语句中，如果请求成功catch中将为空，反之，返回相应的错误提示信息。

接下来，我们把微博数据提取出来，然后去掉try/catch我们在JSON viewer中查看微博数据的结构。

图6 微博JSON数据

通过上图，我们知道返回数据是一个JSON数组，它的大小是根据我们的请求参数count决定的，而且微博规定每个请求最多返回200条微博。

接下来，我们需要把数据显示到页面中，现在让我们实现success方法吧！具体代码如下：

// Gets response data from weibo api.
success: function(json) {
  if (json.data.error) {
    // Can't get data displays error.
    failEye(json.data.error);
    return;
  }

  // Emptys contain with fade out effect.
  $cont.fadeOut('fast', function() {
    $cont.empty();

    // iterates weibo results
    $.each(json.data.statuses, function(i) {
      if (!opts.filter.call(opts, this) || this.truncated)
        return; // skip this weibo, some weibos may be deleted.
      var $img, $text, w,
                  tweet = opts.formatter(this, opts),
                  $tweet = $(tweet);

      // Weibo data.
      $tweet.css(opts.css['tweet']);
      $img = $tweet.find('.weiboSearchProfileImg').css(opts.css['img']);
      $tweet.find('.weiboSearchUser').css(opts.css['user']);
      $tweet.find('.weiboSearchTime').css(opts.css['time']);
      $tweet.find('a').css(opts.css['a']);
      $tweet.appendTo($cont);
      $text = $tweet.find('.weiboSearchText').css(opts.css['text']);

      if (opts.avatar) {
        w = $img.outerWidth() + parseInt($tweet.css('paddingLeft'));
        $text.css('paddingLeft', w);
      }
    })

    // Loads weibos with fade in effect.
    $cont.fadeIn('fast');

    // Invokes weibo api again.
    if (json.data.statuses.length < 2) {
      if (opts.refreshSeconds)
        setTimeout(gradWeibos, opts.refreshSeconds * 1000);
      return;
    }

  });
}

在success()方法中，我们使用了jQuery的fadeIn()和fadeOut()函数实现微博加载时淡入和清除时淡出的效果。

接着，我们使用$.each()方法遍历JSON数组中的每条微博信息，然后把它们添加到页面DOM中。

图7 微博信息

我们通过跨源请求调用微博search/topics接口，然后把服务器返回的JSON数据显示到页面中。

5、微博相对时间
现在，基本实现了jquery.weibo.search.js插件了，但我们发现每条微博显示时间好像不太正常，而且还没有实现滚动（animate）和淡入（fadeIn）效果。

由于微博是使用相对时间来表示微博插件时间，当然我们也可以显示具体时间，接下来，让我们把微博创建时间（created_at）转化为相对时间的形式，由于微博的时间格式为：“Thu Feb 14 20:33:30 +0800 2013”，所以我们定义了方法relativeTime()把微博时间转换为相对时间。

function relativeTime(dateString) {
  var values = dateString.split(" ");
  dateString = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(dateString);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);

  if (delta < 60) {
    return 'just now';
  } else if (delta < 120) {
    return 'a minute ago';
  } else if (delta < (60 * 60)) {
    return (parseInt(delta / 60)).toString() + ' minutes ago';
  } else if (delta < (120 * 60)) {
    return 'about an hour ago';
  } else if (delta < (24 * 60 * 60)) {
    return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
  } else if (delta < (48 * 60 * 60)) {
    return '1 day ago';
  } else {
    return (parseInt(delta / 86400)).toString() + ' days ago';
  }
}

上面，我们定义了方法relativeTime()，首先它通过拼接方式转换时间格式为“Feb 14, 2013 20:33:30”，然后把dateString转换为Date，接着获取当前时间减去微博时间（created_at）计算出相对时间（delta）。

图8 relativeTime计算相对时间

5、微博动态效果
上面，我们通过方法relativeTime()把微博的时间转换为相对时间，接下来，我们需要实现微博的滚动（animate）和淡入（fadeIn）效果。

在新浪微博大厅里，我们可以看到“大家正在说”中每条微博由上往下地滚动着，其实要实现该滚动效果我们可以使用jQuery的animate()方法，具体实现如下：

/**
* Weibos rolling from top to bottom
*/
function weiboIn() {
  if (paused || grabbing) {
    setTimeout(weiboIn, 500);
    return;
  }

  // Gets last element.
  var h, $el = $cont.children(':last'), $elFirst = $cont.children(':first');

  // Gets last weibo item height.
  h = $el.outerHeight();

  // Animate: increases the first weibo item margin top to 'h'.
  // Then decreases the first weibo item margin top to '0'.
  $elFirst.animate({ marginTop: h }, opts.animInSpeed, function() {
    $elFirst.css({ marginTop: 0, opacity: 1 });
    /*@cc_on
    try { el.style.removeAttribute('filter'); } // ie cleartype fix
    catch (smother) { }
    @*/

    // append the last weibo item first.
    $el.css(opts.css['tweet']).hide().prependTo($cont);

    // Fade in display new item.
    $el.fadeIn(opts.animInSpeed);

    // Loop
    setTimeout(grabFlag ? grabWeibos : weiboIn, opts.timeout);

  });
}

上面，我们定义了weiboIn()方法，它实现微博由上往下滚动显示效果，我们通过animate()方法动态地修改div元素的marginTop属性。

接着，我们需要把滚动到最后的微博重新插入到当前第一条微博上，然后通过fadeIn()函数实现微博淡入显示。

现在，我们基本实现了微博“大家正在说”的向下滚动和淡入效果了，我们先用animate()方法修改div元素的marginTop属性，然后通过淡入方式显示滚动下来的微博。

也许有人会问：“如果要实现向上滚动和淡出效果呢”？其实，该效果和我们之前实现的效果恰好相反，首先需要淡出隐藏微博，然后向上滚动。

现在，我们已经有实现的思路了，那么接下来让我们实现向上滚动和淡出效果吧！具体实现如下：

/**
* Weibos rolling from bottom to top.
*/
function weiboOut() {
  if (paused || grabbing) {
    setTimeout(weiboOut, 500);
    return;
  }

  // Gets last element.
  var h, $el = $cont.children(':first'), el = $el[0];

  // Implements fade out effect. 
  $el.animate(opts.animOut, opts.animOutSpeed, function() {

    // Gets first weibo item height.
    h = $el.outerHeight();

    $el.animate({ marginTop: -h }, opts.animInSpeed, function() {
      $el.css({ marginTop: 0, opacity: 1 });
      /*@cc_on
      try { el.style.removeAttribute('filter'); } // ie cleartype fix
      catch (smother) { }
      @*/

      // append the last weibo item last.
      $el.css(opts.css['tweet']).show().appendTo($cont);
      setTimeout(grabFlag ? grabWeibos : weiboOut, opts.timeout);
    });
  });
}

在weiboOut()方法中，我们通过修改$el的opacity属性实现淡出效果，当然我们也可以使用fadeOut()方法实现淡出，同样我们使用方法animate()修改marginTop属性，不同的是从-h开始变化。

现在，我们已经实现了淡出、淡入以及滚动效果了，接下来我们需要给界面添加CSS样式让程序更加美观。

// Weibo css style in jquery plugin.
css:{
  // default styling
  a:{ textDecoration:'none', color:'#3B5998' },
  eye:{ width:'40px', height:'40px', position:'absolute', left:'-30px', top:'-20px', border:'none' },
  container:{ overflow:'hidden', backgroundColor:'#eee', height:'100%' },
  fail:{ background:'#6cc5c3 url(./images/error_page_small.png) no-repeat 50% 50%', height:'100%', padding:'10px' },
  frame:{ border:'10px solid #C2CFF1', borderRadius:'10px', '-moz-border-radius':'10px', '-webkit-border-radius':'10px' },
  tweet:{ padding:'5px 10px', clear:'left' },
  img:{ 'float':'left', margin:'5px', width:'48px', height:'48px' },
  loading:{ padding:'20px', textAlign:'center', color:'#888' },
  text:{},
  time:{ fontSize:'smaller', color:'#888' },
  title:{ backgroundColor:'#C2CFF1', margin:0, padding:'0 0 5px 0', textAlign:'center', fontWeight:'bold', fontSize:'large', position:'relative' },
  titleLink:{ textDecoration:'none', color:'#3B5998' },
  user:{ fontWeight:'bold' }
}
然后，我们weibo.serach.style.css文件中添加以下样式，具体定义如下：

div.weibo { margin: auto; width: 300px }
#weibo1 { height: 300px;}
#weibo2 { height: 300px; }
body { background-color: white }
body, div { font-family: '微软雅黑', helvetica, verdana, arial, sans-serif }
body { margin: 20px 0; padding: 0; font-size: small; color: #333 }
div {display: block}


/* Image rounded corner*/
.weiboSearchProfileImg{
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

table {
  margin: auto;
  border-collapse: separate;
  border-spacing: 25px;
}

table {
  border-collapse: collapse;
}

图9 程序界面

现在，我们已经实现了微博搜索插件，搜索“情人节”和“元宵节”话题下的微博，通过该插件我们获取了微博信息并且显示到页面中。

以上就是本文的全部内容，希望对大家学习有所帮助。