《双陈记》情侣博客

位置:主页 > 折腾WP > WordPress中动态显示嘀咕消息

WordPress中动态显示嘀咕消息

   最近,貌似最近很多Wordpress博客上都在调用QQ微博的东东,觉得很不错。之前就用嘀咕的微博,弄了个专门的页面,后来受到众人的启发,就改用滚动形式的刷新显示。
   说下我的折腾步骤:首先你要有个嘀咕的号,没有的可以先去嘀咕注册。然后选择更多玩法中的嘀咕秀,选择JS代码形式。就可以生成嘀咕消息的代码。
代码如下:

<div id="wudiShow">正在加载</div><script src="http://www.love730.com/wp-content/js/digu.js" type="text/javascript"></script><script type="text/javascript">wudiShow.setUrl("http://www.digu.com/");wudiShow.setSiteName("嘀咕");</script><script src="http://www.digushow.com/api/wudishow.jsp?callback=callback&username=love730&count=4&isBack=false" type="text/javascript"></script>

 

 (username是你的嘀咕账号,count是要显示的消息数)把生成的代码复制到要显示的地方。比如我的就放在那一个浮动在底部的div里。
  调用Jquery的滚动代码:

 

<!–jquery字幕滚动效果代码–>
<script type="text/javascript">
function AutoScroll(obj){
$(obj).find("ul:first").animate({
  marginTop:"-25px"
},500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
});
}
$(document).ready(function(){
setInterval('AutoScroll("#wudiShow")',3000);setInterval('AutoScroll("#wudiShow_r")',3000)//这里可以修改滚动速度6000,单位毫秒
});
</script>
 

 

调用css代码控制样式

 

#wudiShow {
padding-left:40px;
height:35px;/* 限制高度,单行显示 */
line-height:35px;
overflow:hidden;/* 超出高度部分遮罩 */
float:left;
width:500px;

}

#wudiShow ul li {
color:#FFAB56;/* 字体颜色 */
}

   基本上就OK了,不要忘了调用Jquery的库文件哟。我的嘀咕滚动消息放在最底部的浮动层,一边一个,左边是我的,右边是我老婆的。其中一个背景居中问题还把我折腾了一番,最后找到原因是那个固定浮动层在搞鬼!

 PS:有个问题,不知哪个高手能帮帮我,我的博客文章页面底部,男女2个页面不能分别调用对应的不同的css样式,我在本机都没问题,传到服务器就不行了,只能调用一个样式。php代码,css代码,html,背景图片都检查了,就找不出问题,哎,折磨死我了!



无觅相关文章插件

已经有12位童鞋留言了,还不来盖楼!

  1. 流觞曲水

    高级玩意儿——不懂得我只能来给你灌个水!

  2. 你弄到下面了啊 你分辨率是多少 我这显示你的有点错位

  3. :roll: 好温馨 好浪漫的情侣空间哦
    呵呵
    祝福你们了
    问一下,这个主题是你自己做的吗? 哪里能有下载呢?
    谢谢了
    欢迎回访
    http://www.noviber.org

  4. 大浩的空间很不错哟 赞赞 很温馨呢

  5. JQuery真是好啊,这么强大,俺也滚动了……

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片