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

【第三弹!嘀咕/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.  
  2.  
  3. <script type="text/javascript">
  4. function AutoScroll(obj){
  5. $(obj).find("ul:first").animate({
  6.   marginTop:"-25px"
  7. },500,function(){
  8. $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
  9. });
  10. }
  11. $(document).ready(function(){
  12. setInterval('AutoScroll("#wudiShow")',6000)//这里可以修改滚动速度6000,单位毫秒
  13. });
  14. 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)

(Last modified: 2011-06-06 11:58)