一、插件功能简述
能让任意列表形式的内容依次淡入淡出切换显示,或是上下切换显示。内容可以是文字,图片等。支持各式标签,列表标签ul,li或是div,p标签都可以。
可以非常轻松的实现诸如新闻或公告内容的自动随机切换显示,或是图片幻灯片的播放显示等。下图展示的是图片幻灯片切换的过渡阶段:
您可以狠狠地点击这里:demo实例页面
二、使用方法简述
1、关于jQuery的使用
$("您需要淡入淡出对象的容器的id或class").innerfade({ animationtype: 动画类型是淡出淡入,还是滑上滑下(slide) (默认是淡入淡出(fade)), speed: 淡入淡出的速度,单位为毫秒,或是使用关键字如 (slow, normal 或 fast)(默认是normal), timeout: 一次动画持续的时间 (默认是2000毫秒), type: 滑动显示的顺序: "sequence", "random" 或是 "random_start" (默认是sequence), containerheight: 容器的高度,显示区域的高度 (默认是auto) runningclass: 给容器添加的样式的名称 (默认是innerfade) });
2、关于HTML代码的使用
HTML代码的使用相对轻松些,您只需要把列表项列好,给容器加个class或是id就可以了,剩下的jQuery会帮您自动完成,确实很方便。
如下简单示例:
<ul id="news" class="mb20"> <li>·<a href="#zhangxinxu">二套房贷首付或提至50% 政府拟打压楼市</a></li> <li>·<a href="#zhangxinxu">陈云林抵台参加会谈 向绿营抗议者挥手</a></li> <li>·<a href="#zhangxinxu">全国猪肉出场价连涨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
原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=454