这个是我前几天折腾的一段 jQuery 代码,用来轮换显示侧边栏唠叨栏的信息,并加入渐显渐隐效果。
一开始在网上搜,但搜到的都是需要使用一个高人写的轮换显示函数,我觉得为了这么个小功能去加载这么一大串js代码不值,于是自己试着折腾,没想到竟然折腾成功,虽然方法比较原始,但能用就好。
我没学过 js,对于 jQuery 也是一知半解,很多效果都是不断折腾测试出来的,所以高手请忽视代码的标准性,如果有什么更好的代码请指教。
下面是实现方法和代码:
0. 前提,当然是先加载 jQuery 库了,我用的是 1.3.2 版本,怎么加载 jQuery 这里不贴了,自个放狗搜或者我博客搜。
1. 显示信息的 html 结构,每条消息用 <span></span>,参考如下(具体要多少条消息原理上是没有限制的)
<div class="laodao"> <strong>»</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
赏
oooo
or
- 本文标题:jQuery简单实现信息轮换显示效果(渐显渐隐)
- 本文链接:https://zww.me/archives/25302
- 发布时间:2010年09月12日 10:18
- 版权声明:除非注明,文章均为 zwwooooo 原创,转载请以链接形式标明本文地址!
有点死循环的味道,打开后,CPU的占用率奇高
@Joe
这个功能我用了很久木有奶说的问题