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. BoKeam says:

    拿走

    1. zwwooooo says:

      @BoKeam
      请随意“糟蹋”

    2. BoKeam says:

      这个才是那个公告比较完整的 :mrgreen:

    3. zwwooooo says:

      呵呵,本来不想写的,只是有人要

  2. merror says:

    叫我第二名~

  3. merror says:

    有个问题就是,右边的唠叨框高度是固定的,这样在文字多的时候下面一行就显示不能了。

    1. zwwooooo says:

      @merror
      我的是固定了,不固定的话也可以,但遇到长信息会抖

  4. 写得不错

  5. clyee says:

    昨天买了本jQuery的书才发现真的好强大 短短语句实现强大功能

    1. zwwooooo says:

      @clyee
      对,通常一句话就是一个很赞的效果

  6. zen cart says:

    我还以为是用缓存的插件!

    1. zwwooooo says:

      @zen cart
      缓存?为啥要缓存?

    2. zen cart says:

      @zwwooooo
      Maybe 只是为了加载速度!

  7. 很好,可以不用flash啦

    1. zwwooooo says:

      @软件盒子
      这么简单的功能不需要flash

  8. 竹下无为梦 says:

    :shock: 我觉得没必要吧.

    1. zwwooooo says:

      @竹下无为梦
      各有所需,各有所好

    2. 竹下无为梦 says:

      @zwwooooo
      呵呵,我喜欢简单。

    3. zwwooooo says:

      我也喜欢简单,但更喜欢简单而不简单

  9. 竹下无为梦 says:

    :shock: 还有,我没看出效果啊.

    1. zwwooooo says:

      ……侧边栏最上面

    2. 竹下无为梦 says:

      @zwwooooo
      呵呵,看到了。效果确实不错。

  10. 小松 says:

    然后每隔 6100 秒执行一下函数 laodao()
    这里是6100毫秒吧?

    1. zwwooooo says:

      对,打少字了,囧

  11. Ygs says:

    收藏

    1. zwwooooo says:

      @Ygs
      荒淫折腾

  12. Max Lee says:

    Philna2 主题有个类似的功能,只不过不是自动轮换。。。

    1. zwwooooo says:

      @Max Lee
      没研究过

  13. 飞晏 says:

    函数名字很有特色
    感觉还不

    1. zwwooooo says:

      @飞晏
      (接)错!

  14. 阿修 says:

    z大好像以前折腾了,又撤下,现在又折腾上了

    1. zwwooooo says:

      @阿修
      以前的不是jQ吧,好像是html方法

  15. 包子 says:

    这几天天天加很东西呀

    1. zwwooooo says:

      @包子
      折腾呗

  16. hzlzh says:

    上次我做txwb公告就用的类似 效果很好

    1. zwwooooo says:

      @hzlzh
      我现在侧边栏用的就是你的tw代码

    2. hzlzh says:

      @zwwooooo
      哦 分页ajax 真不错!~我也馋了

    3. zwwooooo says:

      折腾一下吧,如果不考虑通用性(我就暂时没考虑,因为不太懂)还是很容易的

  17. mice says:

    :mrgreen: 我要看分页...

  18. mice says:

    我要分页...我要分页...

    1. zwwooooo says:

      @mice
      - - ^ ...

  19. mice says:

    我还是去别的日志看好了- -.

  20. mice says:

    效果不错 嘿嘿``坐等研究文档 然后我直接CP..

    1. zwwooooo says:

      @mice
      荒淫cp

    2. winy says:

      AD一下,我那里有文,欢迎去围观 :mrgreen:

    3. mice says:

      @winy
      你是说的你左下角那个东西么-.- 唔 各种JQ代码都要学习..现在正处于白痴阶段

发表评论

昵称 *

网址

B em del U Link Code Quote