如插件能为程序增添强大的功能和扩展乐趣一样，模版中加些小挂件也能使你的博客看起来与众不同，用起来别有趣味。今天应邀为大家介绍下羽中漫步中几个挂件的制作方法，希望能帮助大家打开思路，做出适合自己模版风格的美丽挂件:)


【第三弹！嘀咕/twitter滚动显示挂件】


digushow.jpg

微博客的出现给传统博客以强大的补充，在自己的博客中实时显示微博内容能带给读者更加近距离的感觉，即使在没有博文更新的日子你仍然可以通过微博显示你的状态。

羽中漫步的首页采用了jquery字幕式滚动效果显示微博内容。要做到这点首先需要微博服务提供商API接口的js输出支持，一般都有提供，如我使用的是嘀咕“嘀咕秀”插件提供的输出地址：http://www.digushow.com/api/wudishow.jsp?callback=callback&username=jwalk&count=4&isBack=false
username=后是你的帐号ID，count=后设置显示条数，isBack=后若为true则显示在嘀咕上回复别人的内容，false则为不显示回复内容。
仅有这个输出js还不够，还需要一个格式化显示输出内容的js文件。嘀咕秀默认提供的http://www.digushow.com/js/wudishow.js显示出的效果如下：

wudishow.jpg

显然如果希望单行滚动显示就必须去掉头尾的“xx正在干嘛”和“进入xx的主页”部分。因此羽中修改了wudishow.js并更名为digu_output.js把它上传到了本地。
这样基本准备工作就完成了，接下来只需三步就可轻松挂上你的嘀咕字幕：

1. js。不要忘了先在<body>标签外引用jquery库文件，第一弹中已有说明。接着继续引用以上准备的两个js和一段jquery代码：

  1. <!--嘀咕秀的API输出-->
  2. <script type="text/javascript" src="http://www.digushow.com/api/wudishow.jsp?callback=callback&amp;username=jwalk&amp;count=4&amp;isBack=false" ></script>
  3.  
  4. <!--修改过的格式化js-->
  5. <script type="text/javascript" src="http://www.jzwalk.com/usr/themes/jwalk/js/digu_output.js"></script>
  6.  
  7. <!--jquery字幕滚动效果代码-->
  8. <script type="text/javascript">
  9. function AutoScroll(obj){
  10. $(obj).find("ul:first").animate({
  11.   marginTop:"-25px"
  12. },500,function(){
  13. $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
  14. });
  15. }
  16. $(document).ready(function(){
  17. setInterval('AutoScroll("#wudiShow")',6000)//这里可以修改滚动速度6000，单位毫秒
  18. });
  19. </script>

2. html。在模版中合适的位置写上<div id="wudiShow">郑在嘀咕...</div>。中间的文字是未载入时显示的过渡提示，如常见的“loading...”“载入中。。。”等可以自己发挥，一般瞬间就会被js中格式化的微博内容替换掉。

3. css。控制显示效果如字体颜色、单行高度等，根据自己的模版调整，我的如下：

  1. #wudiShow {
  2. padding-left:20px;
  3. height:20px;/* 限制高度，单行显示 */
  4. line-height:180%;
  5. overflow:hidden;/* 超出高度部分遮罩 */
  6. float:left;
  7. width:555px;
  8. }
  9.  
  10. #wudiShow ul li {
  11. color:#FFAB56;/* 字体颜色 */
  12. }

——这样微博滚动单行显示的效果就大功告成了！
(注意：如果想修改id="wudishow"为自定义id也要去修改digu_output.js和滚动效果代码里相对应的#wudishow)

12