jQuery万能切换插件powerSwitch测试
一、Tab选项卡
1. 普通的选项卡效果
知名美女1：你知道吗？Home键可以快速返回顶部，End键到页面底部！
基本选项卡，点击事件触发，元素主体单纯display显隐，没有动画效果；优点在于高度不需要限死。这里默认显示第二个面板。
2. hover触发的选项卡效果
知名美女1
鼠标经过事件触发，元素主体单纯display显隐，没有动画效果，回调实现图片的动态加载。主要测试默认的200毫秒hover延时。
HTML代码：
JS代码：
3. 移动动画选项卡
水平切换选项卡。父容器需高宽限制；子列表需绝对定位。适应于流体布局及响应布局。translate类型动画。
HTML代码：
JS代码：
4. 自动播放
两张图，自动播（鼠标hover不停止），可暂停。translate类型动画。还带小翅膀哦！
HTML代码：
JS代码：
二、跑马灯切换
1. 左右切换，scroll动画
每次切换一个列表，动画使用最父级(定高定宽overflow:hidden的那个元素)的scroll滚动实现。
HTML代码：
JS代码：
2. 左右切换，transform动画
每次切换2个列表，动画应用在列表容器元素(position:absolute的那个)的transform|left/top移动实现。
HTML代码：
JS代码：
3. 上下切换，无动画
每次切换1个列表元素，无动画效果。目的在于测试animation和direction这两个参数
HTML代码：
JS代码：
$("#caroTriggerOut3 a").powerSwitch({
container: $("#caroBox3"),
animation: "none",
direction: "vertical",
onSwitch: function(target) {
target.each(function() {
var img = $(this).find("img").get(0);
if (img && !img.src) {
img.src = img.getAttribute("data-src");
}
});
}
});4. 无限切换
无限滚动。隐藏技能。设置匿名API classDisabled为''(空字符串)或null.
HTML代码：
JS代码：
$("#caroEndless a").powerSwitch({
classDisabled: '',
container: $("#caroBoxEnd"),
number: 2
});
三、手风琴效果
1. 比较纯正的手风琴效果
slide动画效果下的手风琴效果。
HTML代码：
JS代码：
2. 可伸缩的垂直导航效果
能伸能缩的垂直导航。状态差异回调控制。单纯显隐。主要测试toggle.
HTML代码：
JS代码：
四、其他特殊变体
1. 更多展开与收起
自从日本开发出只有女性才能操纵的飞行超兵器“IS”（即“斯特拉托斯”之后，世界发生了翻天覆地的变化，女性的地位被提升到优先准位。培育IS操纵者的学校“IS学院”每年接纳来自世界各地的优秀候补生少女。然而，主人公织斑一夏虽然是个男生却不知 因为什么原因能够启动IS，因此他被强制送入了IS学院就读。织斑一夏从此成为女校中的万红丛中一点绿，从他青梅竹马的剑道少女帚开始，不同国籍不同性格 ... ...
更多展开与收起，耳熟能详，不多说，上代码~
HTML代码：
JS代码：
2. 文字广告播啊播
关键点：指向自身。
HTML代码：
JS代码：
3. 每次显示2条
-
从演员说起： 安吉拉宝贝作为麻杆届的优秀代表，在唐人以丰腴为美的审美观里，连珠圆玉润尚做不到，不知道她是怎么混上花魁的，（喂，你是给评委塞钱了吧。）在片中，她要做的只有两件事，一是如蛇精一般不断扭曲腰身，二是扮楚楚可怜状。在成为花魁之后，她体内文艺细菌蠢蠢作祟，毅然决然地拒绝了金钱和权力的腐蚀，决定把自己的初夜献给大湿人元公子。正当豆瓣文艺屌......... -
故事的开头是这样的，大唐的水军出征去打击敌对势力，但是刚进伟大航路的时候，海中突然出现了一个怪兽样神秘物体，战斗力奇强，几下就把水军打散了。 怪兽的出现让不明真相的围观群众三观尽毁，开始背离社会主义精神文明道路，迷信起腐朽的资本主义文化来。 皇上很生气，指示公安尽快破案，捉拿怪兽。 狄仁杰在大街上碰到了anglebaby饰演的女优。这个女优是个日本......... -
讨论《狄仁杰之神都龙王》之前，有一点特别值得注意，它与《狄仁杰之通天帝国》组成了一个全新的电影系列。字幕结尾处，大量人物场景概念图的出现更加佐证了这一点（它被称为第四个彩蛋，也是最长的彩蛋）。冲那庞大架势，已经不是跟观众调皮示好“我要拍个续集”那么简单，这几乎意味着它是一个重磅系列。 光是古装武侠片领域，徐克制作过多个电影系列，像声名鹊起的《......... -
先提提几个造型。 安鸡拉出场比较称职，白冠子红珊瑚串配红白软纱，敦煌妙相，庄重里带娇俏，妆容衣冠都没有不妥，身形太幼小，顶不起来，不过换个高大健硕的，可能又会把衣裳饰品给盖下去，她做为模特，有模特的职业操守，烘托造型是第一要务，反而有了优势。一样的形象，换盛年王祖贤扮上，绝对欲仙欲死，可估计到时候小娘子拿的是花篮还是琵琶都没人记得住了，真要找......... -
当故事开始,一片完全不符合动力学原理的方头战船迎面而来的时候,俺仿佛梦回龙门飞甲,只是这次站站船上的不是厂花雨化田。 久违了,徐克的3D。 应该说神都龙王在技术上比龙门飞甲有所进步，特别是景深，但比例变形的问题似乎随之变得更加严重了，全片第一次出现神都洛阳的全景，酷似迷你街道模型，而且以后所有的大场景都存在这个问题。 外行谈技术，只能说直观......... -
去看了徐克的新作《狄仁杰之神都龙王》，见到了老爷本人，很高兴。 作为10年刘德华、李冰冰主演的那部《狄仁杰之通天帝国》的前传，这两部电影的内容联系不大，唯一明确的联系是狄仁杰那把“用这柄锏与对手的兵器向碰，便能听出裂隙，击之必断”的亢龙锏。徐克电影的编剧方面常是软肋，天马行空的亮点不少，但是剧本的整体性和合理性一向欠缺。近年来，老爷的剧本......... -
首先就是，能不能不要再在关于唐代的影视文艺作品中广泛使用“公子”“小姐”了…… “郎君”和“娘子”才对味儿嘛！ 然后就是一个我不太能理解的事情…我虽然知道认真我就输了但是…这片的背景，是在唐东都洛阳对吧？洛阳就是河南那个洛阳对吧……？然后它不是不临海么，我看了一下就算顺河道东出至海也不近呢，是我没看明白还是怎么着，男主和他的小伙伴们第一次正面遇上......... -
刚从影院出来，从来不写影评，但是这部片子让我浪费了100多的票价，实在忍不住，怒上豆瓣开喷！ 因为没有写这类东西的经验，也就不分什么部分之类的了，从头到尾回忆一遍，想到哪写到哪，随便看看，轻喷。 电影一开始是水军遇到那只鳖皇（后来看得出来应该是一只比较腻害的蝠鲼，或者古氏鱼，不懂，反正不是鳖！），基本死光了，IMAX效果挺好，不过鳖皇轻而易举的干翻......... -
狄仁杰之乱七八糟 《狄仁杰之神都龙王》槽点太多，无从吐起，想到哪吐到哪吧。 你在海里设计个大怪物是要闹哪样？攻打洛阳城吗，但是洛阳城在岸上啊，你这大怪物有登陆作战能力吗，有就展示一个，没有你在海里搅得天翻地覆有什么用？ 或者你要说水陆双线作战，大怪物专门负责攻击船队，但是你庞大的地上部队呢？没有啊，只有蝙蝠洞里的一群蝙蝠。 哦，对了，......... - 显示更多 ↓
特定列表数目的展开更多。亮点：data-rel值为一个复杂选择器。
HTML代码：
JS代码：
4. 同时展开收起多个列表
- 《恋碍选项 第3集》圣光雾气反重力裙 上升气流才是业界良心
- 《苍蓝钢铁的琶音 第4集》 舰娘战败 大破不可避
- 《噬血狂袭 第4集》 终于把持不住了 推倒吸血初体验
- 《境界的彼方 第3集》 眼镜Play黑长直 妹控的妹被玩弄
- 《新夜樱四重奏 第2集》 砍掉重练好顶赞 萌系画风送福利
- 《囮物语 第3集》抚子黑化也不忘卖萌 开后宫被捅合情合理(茶)
- 《萌萌侵略者 第1集》死宅异世界传教萌文化 屌丝瞬间变烧棍
测试与上面一次展开2个是否冲突
HTML代码：
JS代码：
