2010年09月12日 188条评论

jQuery简单实现信息轮换显示效果(渐显渐隐)

这个是我前几天折腾的一段 jQuery 代码,用来轮换显示侧边栏唠叨栏的信息,并加入渐显渐隐效果。

一开始在网上搜,但搜到的都是需要使用一个高人写的轮换显示函数,我觉得为了这么个小功能去加载这么一大串js代码不值,于是自己试着折腾,没想到竟然折腾成功,虽然方法比较原始,但能用就好。

我没学过 js,对于 jQuery 也是一知半解,很多效果都是不断折腾测试出来的,所以高手请忽视代码的标准性,如果有什么更好的代码请指教。

下面是实现方法和代码:

0. 前提,当然是先加载 jQuery 库了,我用的是 1.3.2 版本,怎么加载 jQuery 这里不贴了,自个放狗搜或者我博客搜。

1. 显示信息的 html 结构,每条消息用 <span></span>,参考如下(具体要多少条消息原理上是没有限制的)

<div class="laodao">
	<strong>&raquo;</strong><!-- style="display:none;"可以在style.css自定义 -->
	<span style="display:none;">最新折腾:Ajax评论翻页,荒淫测试... </span>
	<span style="display:none;">广告: 主题定制/修改可以找我。</span>
	<span style="display:none;">其他……</span>
</div>

2. jQuery 代码,具体看注释

jQuery(document).ready(function(){
	laodao(); // 先执行一次函数 laodao()
	setInterval('laodao()', 6100); // 然后每隔 6100 毫秒执行一下函数 laodao()
});
var laodao_i = 0, //span排序序号
	landao_span_arr = 0;
	laodao_span_num = 0; // 统计span数量并减 1 处理
function laodao() {
	if(landao_span_arr==0){
	landao_span_arr = $(".laodao").children("span");
	laodao_span_num = landao_span_arr.length - 1; // 统计span数量并减 1 处理
	}
	if (laodao_i > laodao_span_num) {laodao_i = 0;} // 如果计数器(span排序)大于 laodao_span_num 时归零
	$('.laodao span:eq('+laodao_i+')').fadeIn(1500); //渐显效果显示第 laodao_i 个span
	setTimeout(function() {$('.laodao span:eq('+laodao_i+')').fadeOut(1500);laodao_i++;},4500);
};

OK,就这样了,有点忙,不罗嗦了。

另外,昨天给主题加了 ajax 评论翻页功能,荒淫测试。

zww
or
oooo

“jQuery简单实现信息轮换显示效果(渐显渐隐)”有188条评论

  1. 等待思索 says:

    我也没学过JS。。所以看不懂什么意思,。唉

    1. zwwooooo says:

      @等待思索
      CP折腾一下应该也能用

  2. 久酷 says:

    这效果不错 有地方可以用到 :mrgreen: :mrgreen:

    1. zwwooooo says:

      @久酷
      呵呵,玩玩总是有用

  3. Solo says:

    还好,很简单。

    1. zwwooooo says:

      @Solo
      的确是

  4. 学夫子 says:

    这个看见很多人都有,特别是看见小松里就有一个,不过是emlog,我的首页就是非常的简单了

    1. zwwooooo says:

      @学夫子
      jQuery是通用的

  5. winy says:

    这个比较简单,试试

    1. zwwooooo says:

      @winy
      自己折腾只求效果……

  6. Jayuh says:

    博客正文显示代码,是用的什么插件?挺简介、漂亮的。

    1. zwwooooo says:

      @Jayuh
      你说的哪里?首页?如果是首页的话我用的是php截断函数,我写过相关文章

    2. Jayuh says:

      @zwwooooo
      我就是问本文显示的代码。

    3. zwwooooo says:

      @Jayuh
      我直接贴html的,没有用插件,呵呵

    4. Jayuh says:

      @zwwooooo
      那怎么让代码彩色的呢?有怎么给了个边框?

    5. zwwooooo says:

      @Jayuh
      代码高亮去豆芽网或者其它类似网站生成,至于框框当然是主题的css定义了

    6. Jayuh says:

      @zwwooooo
      ok,谢了,知道了。

  7. 纯粹盖楼。否则,技术文,我还能如何顶 = =

    1. zwwooooo says:

      @❤•终于°
      纯粹也荒淫!

    2. @zwwooooo
      当然要荒淫,荒淫是生活的一部分。
      这么淫荡的博客都不墙,G%F@W真瞎了眼 :mrgreen:

    3. zwwooooo says:

      @❤•终于°
      拼音之误之用而已 :grin:

    4. @zwwooooo
      你搞了敏感词啊 = =

    5. zwwooooo says:

      @❤•终于°
      人工修改的,没办法,这些词不能出现太多

  8. 球犯 says:

    哈哈 支持支持 真是越来越多好东西了~

    1. zwwooooo says:

      @球犯
      慢慢折腾

  9. 渐显渐隐,等不等于若隐若现 :lol:

    1. zwwooooo says:

      @第六空间
      接近,如果把间隔时间调小的话 :lol:

  10. 小邪 says:

    哎呀呀,突然想给博客加个显示twitter的侧边 ~
    研究研究 ~ :mrgreen: :mrgreen:

    1. zwwooooo says:

      @小邪
      twitter的话很多人折腾好了,我博客也有,但只是单条的

  11. 万戈 says:

    正好在给博客联盟做主题,这个有需要,嘿嘿,拿下了 :mrgreen:

    1. zwwooooo says:

      @万戈
      羡慕万戈的单,很多,什么时候分给俺一丁点儿呢?好让我不会闲着

    2. 万戈 says:

      @zwwooooo
      不早说,原来你也接单呀,上周刚有一单近2000的主题交给木木了,我实在没时间,顾不过来呀 :razz:

    3. zwwooooo says:

      @万戈
      一直接~我们都是被逼出来接,比较低调接,下次别忘了我 :grin:

    4. Kana says:

      ((偷偷的探出头...慢慢的把手举起来))奈个....有美工的部分缺不.....>///< :oops:

    5. 万戈 says:

      @Kana
      介个。。。点点手指。。。有已经有设计图了 :smile:

    6. Kana says:

      @万戈
      暗淡淡的飘走...... :cry:

  12. biao166 says:

    用这效果整个公告栏最强大

    1. zwwooooo says:

      @biao166
      其实唠叨栏就是公告栏了,呵呵

  13. biao172 says:

    绝对的YD

    1. zwwooooo says:

      @biao172
      荒淫而已

  14. 哲哲 says:

    收藏下。在自己的子域名博客上练练手

  15. 园子 says:

    这个没有做示例页面吗?

    1. zwwooooo says:

      @园子
      感觉你看了文章等于没看……文章第一段就说明鸟:侧边栏最上面唠叨栏……

  16. BoKeam says:

    又出问题了。我把jquery/1.3.2/jquery.min.js放footer后ajax不能用了。是不是还要修改那 :shock:

    1. zwwooooo says:

      @BoKeam
      注意js加载顺序吧,反正jQ库要在最前面

    2. BoKeam says:

      @zwwooooo
      就是不知道怎么弄。。难道这段

      <script type="text/javascript" src="/comments-ajax.js">

      也要放到下面去 :shock:

    3. zwwooooo says:

      当然,凡是依赖jQ库的都要在jQ库加载后加载

  17. BoKeam says:

    ajax评论不能用

  18. 丕子 says:

    漂亮

  19. 郑永 says:

    我最近挺忙的,你真聪明,我突然想起以前自己在学asp的时候,调啊调,慢慢就出现自己要的效果了,很有成就感,能够感受到哈。

    1. zwwooooo says:

      @郑永
      跟聪明没关系……

  20. 百奥博 says:

    这几天太忙,才看到。感谢zww分享。已经使用。为了这个效果,我给一个博客加载了jquery。呵呵

    1. zwwooooo says:

      @百奥博
      强!精神可嘉,干脆再加点啥

发表评论

昵称 *

网址

B em del U Link Code Quote