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. 你的博文真好,虽然有许多我看不大懂!

  2. 有点蓝 says:

    ajax 评论翻页功能? 在哪里有教程

    1. zwwooooo says:

      @有点蓝
      网上搜一下有吧,但都不是很详细,你可以去winksky.com那里看看

    2. 有点蓝 says:

      @zwwooooo
      那个站我好像去过,不过现在好像出问题了,我这里提示访问失败呢。

    3. zwwooooo says:

      @有点蓝
      所以要自己慢慢折腾,这个比较麻烦,我都懒的写

  3. huangjun says:

    你很喜欢渐现渐隐效果啊~

    1. zwwooooo says:

      @huangjun
      好吧,我喜欢若隐若现

  4. 在哪里看效果。

  5. 这个翻页的效果不错,啥时候弄出来分享下? :lol:

    1. zwwooooo says:

      @闲云野鹤
      这个不太好共享,因为需要自己根据自己主题慢慢折腾,我也是参考了别人的教材费了很大劲才成功~

    2. @zwwooooo
      参考那里的呀,我也去参考一下,哈哈

    3. zwwooooo says:

      @闲云野鹤
      我这次参考 winysky.com 的,你去看看,反正直接CP是不行的。

  6. 真好 says:

    哈哈,你真能折腾。。。学习了。不过那个唠叨每次都要在后台手动写,有点麻烦啊?

    1. zwwooooo says:

      @真好
      你可以结合twitter/滔滔/新浪微博……

  7. 不错哦!学习

  8. joyla says:

    看到了效果 很炫哦!

    1. zwwooooo says:

      @joyla
      若隐若现,嘿嘿

  9. dengmin says:

    不错 很好

  10. 签名 says:

    讲得很好的 就是没太明白 天资愚钝 别介意 呵

  11. 秋上书 says:

    等俺大脑清醒了再看看

  12. 山水画 says:

    好专业啊,博主好厉害

  13. 这个好啊、、狗神秘感

  14. zen cart says:

    这个评论翻页不错!

    1. zwwooooo says:

      @zen cart
      可以试着折腾

    2. zen cart says:

      @zwwooooo
      目前评论还不至于分页!

  15. Kana says:

    在你这大概玩了快五分钟的分页.....决定出差回来也要想办法捣个- . . -+

    1. zwwooooo says:

      @Kana
      慢慢玩

  16. LAONB says:

    企业站接不接,有时间聊下流程。

  17. 文章不错,来踩踩!!!

  18. FORECE says:

    -_-!!这个博客越来越绚了。

    1. zwwooooo says:

      @FORECE
      简单中带上点不简单,我觉得这样比较好玩

  19. 你这里好像遭到垃圾评论攻击了。

    1. zwwooooo says:

      @向晚 向晚
      对,后台看看更厉害,每天都几百垃圾

  20. 宁波SEO says:

    代码真的很强大,嗯学习了

发表评论

昵称 *

网址

B em del U Link Code Quote