Old

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

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25302

188 comments

  1. BoKeam BoKeam Google Chrome 7.0.520.0 Google Chrome 7.0.520.0 Windows 7 Windows 7

    拿走

    沙发
  2. merror merror Google Chrome 6.0.490.1 Google Chrome 6.0.490.1 Windows XP Windows XP

    叫我第二名~

    板凳
  3. merror merror Google Chrome 6.0.490.1 Google Chrome 6.0.490.1 Windows XP Windows XP

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

    地板
  4. ......
  5. Joe Joe Google Chrome 15.0.874.121 Google Chrome 15.0.874.121 GNU/Linux x64 GNU/Linux x64

    有点死循环的味道,打开后,CPU的占用率奇高

    81楼
    • zwwooooo zwwooooo Firefox 8.0 Firefox 8.0 Windows 7 x64 Edition Windows 7 x64 Edition

      @Joe
      这个功能我用了很久木有奶说的问题

Leave a Reply