jQuery-innerfade内部列表自动淡入淡出插件

这篇文章发布于 2009年12月21日,星期一,23:41,归类于 jQuery相关。 阅读 36763 次, 今日 4 次 一条评论

 

一、插件功能简述

能让任意列表形式的内容依次淡入淡出切换显示,或是上下切换显示。内容可以是文字,图片等。支持各式标签,列表标签<ul><li>或是<div><p>标签都可以。

可以非常轻松的实现诸如新闻或公告内容的自动随机切换显示,或是图片幻灯片的播放显示等。下图展示的是图片幻灯片切换的过渡阶段:

淡入淡出切换过程中

您可以狠狠地点击这里:demo实例页面

二、使用方法简述

1、关于jQuery的使用

语法如下:

$().innerfade(options);

其中options是个可选参数对象,API包括:

API名称 默认值 释义
animationtype ‘fade’ 动画类型是淡出淡入('fade'),还是滑上滑下('slide')
speed ‘normal’ 淡入淡出的速度,单位为毫秒,或是使用关键字如 (slow, normalfast)
timeout 2000 一次动画持续的时间
type ‘sequence’ 滑动显示的顺序: "sequence", "random" 或是 "random_start"
containerheight ‘auto’ 容器的高度,显示区域的高度
runningclass ‘innerfade’ 给容器添加的样式的名称

2、关于HTML代码的使用

HTML代码的使用相对轻松些,您只需要把列表项列好,给容器加个class或是id就可以了,剩下的jQuery会帮您自动完成,确实很方便。
如下简单示例:

<ul id="news" class="mb20">
  <li>·<a href="#">二套房贷首付或提至50% 政府拟打压楼市</a></li>
  <li>·<a href="#">陈云林抵台参加会谈 向绿营抗议者挥手</a></li>
  <li>·<a href="#">全国猪肉出场价连涨6周 农产品涨价幅度大</a></li>
</ul>

或是:

<div class="fade">
  <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p>
</div>
<div class="fade">
  <p>a</p><p>b</p><p>c</p><p>d</p><p>e</p>
</div>

3、相应jQuery代码

以下jQuery代码针对上面的HTML代码:

$("#news").innerfade({
  animationtype: "slide",   // 上下滑动
  speed: 750,               // 速度750毫秒
  timeout: 2000,            // 每2秒变换一次
  type: "random",           // 随机显示列表内容
  containerheight: "1em"    // 显示的高度为1em
});
$(".fade").innerfade({
  speed: "slow",           // 速度切换慢
  timeout: 1000,           // 列表内容更换速度1000毫秒
  type: "sequence",        // 顺序显示
  containerheight: "1.2em" // 容器高度1.2em
}); 

三、下载

1、您可以直接下载js插件文件(右键-另存为等):jquery.innerfade.js

2、zip源文件打包下载
您可以狠狠地点击这里:源文件下载(.zip 20.2K)

四、结语

参考自:http://medienfreunde.com/deutsch/weblog/aus_der_praxis.html?nid=162

(本篇完)

分享到:


发表评论(目前一条评论)

  1. 阳巅峰说道:

    如果能拥有悬停功能那就完美了!希望能加上并通知更新,谢谢!