Axiu Blog
户啦。 首先,这个东西是结合[Thread Twitter](http://fairyfish.net/2009/01/16/thread-twitter/ "Thread Twitter: 会话方式显示你的 Tweets") 搞出来的,当然如果你喜欢编辑文档的话,也可以再文件里直接写入内容。这个插件有个功能是在侧边栏输出twitter信息,thread\
我不是完全体的twitter控,但用它往博客上发新信息,确实很方便。所以我决定还是琢磨琢磨搞出来个小广播样子的滚动新闻条。在洗白白浑身清爽之后,这个东西被我华丽地整上了~~效果见首页”小鸟”栏~~点击可以Follow我哦!~当然是仅限墙外用户啦。 首先,这个东西是结合[Thread Twitter](http://fairyfish.net/2009/01/16/thread-twitter/
我不是完全体的twitter控,但用它往博客上发新信息,确实很方便。所以我决定还是琢磨琢磨搞出来个小广播样子的滚动新闻条。在洗白白浑身清爽之后,这个东西被我华丽地整上了~~效果见首页”小鸟”栏~~点击可以Follow我哦!~当然是仅限墙外用户啦。 首先,这个东西是结合[Thread Twitter](http://fairyfish.net/2009/01/16/thread-twitter/
滚动twitter消息的实现
Max

我不是完全体的twitter控,但用它往博客上发新信息,确实很方便。所以我决定还是琢磨琢磨搞出来个小广播样子的滚动新闻条。在洗白白浑身清爽之后,这个东西被我华丽地整上了~~效果见首页”小鸟”栏~~点击可以Follow我哦!~当然是仅限墙外用户啦。

首先,这个东西是结合Thread Twitter 搞出来的,当然如果你喜欢编辑文档的话,也可以再文件里直接写入内容。这个插件有个功能是在侧边栏输出twitter信息,thread_twitter_sidebar();可以直接使用的。

它的输出是~~

<li>…… <li>…… <li>……

这种格式。你可以在后台编辑该插件,让它显示固定的条数,比如我设置为5条。

有没有去过Movie Castle 呢?应该记得他网站上头部的滚动新闻吧?它的实现方法就是查找’p’,之后分段显示内容。我想做的就是改装它……(没错,我就是CP党!哈)。

好了,下面开始正题,具体怎么做呢?

1、先在你想设置twitter广播的地方定义一个容器,div class=”words” id=”fade_link”,

可以修改,之后把你想显示的内容放进去,注意用li来区分各个条目。

2、重点部分,该编辑一下JS代码了。全部代码如下(部分注释),把他们写入你自己的JS里:

$(document).ready(function() {

$('#fade_link>li').hide();//隐藏"id=fade_link"下的所有条目

t= setInterval("roll(aroll,broll);", 3000); });

var aroll=0; var broll=1;

var t; function roll (off,on){

clearInterval(t);

var $firstNode = $('#fade_link>li'); //#motto 是DIV的ID,'li'来区分条目

$firstNode.eq(off).fadeOut('slow',function(){

$firstNode.eq(on).fadeIn('slow'); });

if(on==($('#fade_link>li').length-1)){

aroll=on; //on 指DIV里最后一个li

broll=0; }

else if(off==($('#fade_link>li').length-1)){ //当最后一个准备关闭,a, b 重新赋值 aroll=0; broll=1; }

else{ aroll++; broll++; }

t = setInterval ("roll(aroll, broll);", 8000);

}

3、完成以上两步,基本就实现了滚动新闻的效果。但是有个小瑕疵,当页面载入完成前,会把新闻内容全部显示,之后隐藏,很难看。你可以把整个容器 “fade_link” 先设置为隐藏,然后在第二部的最前面加上一句$(‘#fade_link’).slideDown(400); 来重新显示它。这么做就可以解决刷新问题了。

4、最后还是要感谢Movie Castle 博主 Yacca 的代码~~~CP党就此匿鸟……

Comments