Effect of js on rolling display of information like Weibo _ javascript skills

This article mainly introduces how js achieves the scrolling display of information on Imitation Weibo, by rolling up and down to achieve the continuous display of Weibo, and every day the new Weibo displays the information through the fading effect, for more information, see Weibo, Twitter, and other social media websites. Every time I log on to Weibo, I will pay attention to the changes, there are some small changes in layout, and the large changes in API interfaces.

When logging on to Weibo on the homepage, we can see the column "Everyone is saying", which scroll to display the Weibo posts sent by everyone currently. It seems interesting to see this effect, so we will introduce the effect of scrolling Weibo information in the following article.

We have carefully observed Weibo's "what we are talking about". It continuously shows Weibo by rolling up and down, and every day, the new Weibo posts are shown in a fade-in effect.

Weibo "everyone talking"

1. Define Weibo plug-ins
Next, we will define a plug-in to get Weibo under a certain topic. Here we will use jQuery's expansion function to define a jQuery plug-in for Weibo.

JQuery provides a mechanism for users to add custom methods and additional functions to core modules. With this mechanism, jQuery allows us to create custom plug-ins to encapsulate common methods, this improves our development efficiency.

First, we define the self-executed function (IIFE), then pass the jQuery object as a parameter to the self-executed function, and establish the ing between "$" and jQuery, in this way, "$" will not be overwritten by other databases within the execution scope.

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

Above, we define a self-execution function (IIFE) and define an extension method weiboSearch () in it ().

Because Weibo API 2.0 provides an interface for search/topics to search for Weibo posts under a certain topic, if the request is successful, data in JSON format is returned.

Weibo search interface parameters

Through this, we know that the Weibo search interface needs to provide the AppKey (non-OAuth authorization method) and topic keyword (q) of the application ).

Next, we define a literal defaults object, which contains attributes such as the url of the Weibo interface, AppKey of the application, topic keyword (q), and number of records returned on a single page (count, the specific definition is as follows:

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

2. Send cross-source requests
We can call the Weibo search interface by sending ajax requests. If the request is successful, the server will return JSON data to the program, so we need to present the returned data to the page.

 $.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);  }};

Above, we defined the method getJSONP (), which calls the Weibo API by sending ajax requests. In this case, we need cross-Source request data. We can obtain cross-source data in JSONP format, because it allows the server to integrate Script tags to return to the client, cross-origin access is implemented through Javascript callback.

Next, we define the private method grabWeibos () in method $. fn. weiboSearch (). It is responsible for calling the getJSONP () method and obtaining the returned JSON data is displayed on the page.

/*** 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.      })    }  });}

Above, we define grabWeibos (), which calls the getJSONP () method and displays the data to the page after the request is successful.

3. JSON Data Processing
Now we have basically implemented jquery. weibo. search. the js plug-in is used to search Weibo functions under a certain topic. Because of the time, we have designed the interface. The specific HTML code is as follows:

Next, we will reference the jQuery Library and the custom microblog topic search plug-in jquery. weibo. search. js in the page code. The specific code is as follows: