js实现仿微博滚动显示信息的效果_javascript技巧

在首页登陆微博时，我们可以看到一栏“大家正在说”，它滚动显示着当前每个人发送的微博；刚看到这个效果觉得挺有趣的，所以我们将在接下来的文中介绍实现滚动显示微博信息的效果。

我们细细观察了微博的“大家正在说”，它是通过由上往下滚动来实现不断显示微博的，而且每一天新微博都是通过淡入效果显示的。

图1 微博“大家正在说”

1、定义微博插件
接下来，我们将定义一个插件用来获取某话题下的微博，这里我们将使用jQuery的扩建功能来定于一个微博的jQuery插件

由于jQuery提供了一种机制：让用户给核心模块增加自定义的方法和额外的功能；通过这种机制，jQuery允许我们创建自定义的插件封装常用的方法，从而提高我们的开发效率。

首先，我们通过定义自执行的函数（IIFE），然后把jQuery对象作为参数传递给该自执行函数，通过建立“$”和jQuery的对应关系，这样“$”就不会在其执行范围内被其他库覆盖了。

上面，我们定义一个自执行函数（IIFE），并且在它里面定义了一个扩展方法weiboSearch()。

由于，微博API 2.0提供了一个接口search/topics来搜索某一话题下的微博，如果请求成功则返回JSON格式的数据。

图2微博搜索接口参数

通过上图，我们知道微博搜索接口需要提供应用的AppKey（非OAuth授权方式）和话题关键字（q）。

接下来，我们定义了一个字面量对象defaults，它包含微博接口的url、应用的AppKey、话题关键字（q）和单页返回的记录条数（count）等属性，具体定义如下：

2、发送跨源请求
我们可以通过发送ajax请求方式来调用微博搜索接口，如果请求成功服务器会给程序返回JSON格式数据，那么我们需要把返回的数据呈现到页面中。

上面，我们定义了方法getJSONP()，它通过发送ajax请求的方式调用微博API，这时我们需要跨源请求数据，我们可以通过JSONP格式获取跨源数据，由于它允许在服务器端集成Script tags返回至客户端，通过Javascript callback的形式实现跨域访问。

接下来，我们在方法$.fn.weiboSearch()中定义私有方法grabWeibos()，它负责调用getJSONP()方法并且获取返回的JSON数据显示到页面中。

上面，我们定义了grabWeibos()，它调用了getJSONP()方法并且在请求成功后把数据显示到页面中。

3、JSON数据处理
现在，我们基本实现了jquery.weibo.search.js插件，用来搜索某一话题下的微博的功能，由于时间的关系我们已经把界面设计好了，具体的HTML代码如下：

接下来，我们在页面代码中引用jQuery库和自定义微博话题搜索插件jquery.weibo.search.js，具体代码如下：