简洁易用高效
注意：1、当属性 returnDefault: true，为鼠标离开菜单范围，会返回默认指定的导航。
2、指定默认显示任意一个菜单可用属性index（如 index: 2）
3、triggerTime >= speed 否则会事件冲突，导致效果无效
1. <script type="text/javascript">
2. $(".demo-nav").agilebins({
3. type: "menu", /* 菜单类型 menu或box */
4. mainState: ".conts", /* 菜单导航元素 */
5. mainEl: ".sub", /* 菜单盒子元素 */
6. speed: 250, /* 默认=350, 效果速度 */
7. effect: "slideDown", /* 效果类型 fade或slideDown */
8. mainCur: true, /* 使用当前(mainEl)元素,表示不自动查找匹配下级作为效果运行 */
9. autoPosition:true /* 默认=false, 自动识别定位方向, 运用更灵活 */
10. });
11. </script>
注意：1、必须 autoPlay: true 效果才生效。 2、sStep 为滚动步数，参数越大滚动尺度越大
3、delayTime 滚动间隔时间，参数越大越慢
1. <script type="text/javascript">
2. $(".demo-scroll-marquee").agilebins({
3. autoPlay: true, /* 自动播放 (true | false) */
4. direction: 'left', /* 滑动方向，top向上 | right向右 | bottom向下 | left向左 */
5. sStep: 2, /* 滚动步数，参数越大移动越快 */
6. delayTime:20, /* 滚动速度(毫秒) */
7. sEffect: "marquee", /* 无缝隙滚动 */
8. scrollEl: '.textCont ul', /* 滚动列表集合容器 */
9. sPrev: ".prevBtn", /* 滚动按钮，后退 */
10. sNext: ".nextBtn", /* 滚动按钮，前进 */
11. mouseOverStop: true /* 当鼠标悬浮在容器内，暂停播放 (true | false) */
12. });
13. </script>
注意：1、addX 属性为 X 坐标偏移，addY 属性为 Y 坐标偏移。 autoPosition: true 自动识别方向
达到更方便灵活的效果。 2、当 eventType: mouseover 时，建议将 curOff: false 。
必须 triggerTime >= speed 否则会事件冲突，导致效果无效
1. <script type="text/javascript">
2. $(".demo-navigation").agilebins({
3. type: 'box', /* 菜单box */
4. triggerTime: 0, /* 鼠标滑过, 触发延迟时间(毫秒) */
5. speed: 350, /* 必须 delayTime >= speed >= 0 */
6. mainState: 'h3', /* 导航列表元素 */
7. mainEl: ".menus", /* 下拉菜单元素 */
8. iTrigger: ".menus li", /* 菜单选项列表元素 */
9. iTriggerFunc: function (el) { /* 点击菜单选项，事件触发，用于参数传递 */
10. var val = el.text();
11. el.parent().siblings("h3").find("a").text(val);
12. },
13. effect: "fade", /* 效果类型: fade | fold | slideDown | top | right | bottom | left */
14. easing: "swing", /* 缓动效果类型，更多效果请引用(jquery.easing.min.js) */
15. eventType: "click" /* 事件类型: mouseover | click */
16. });
17. </script>
注意：1、必须 triggerTime >= speed 否则会事件冲突，导致效果无效
2、当 pnLoop: false 上下按钮第一个和最后一个为时，将不再循环，建议 loop: false
1. <script type="text/javascript">
2. $(".domo-tab-box").agilebins({
3. autoPlay: true, /* 自动播放(true | false) */
4. loop: true, /* 无限循环播放(true | false) */
5. pnLoop: true, /* 是否需要按钮前后循环(true | false) */
6. delayTime: 3500, /* 自动播放延迟时间(毫秒)，注意：delayTime >= speed >= 0 */
7. speed: 350, /* 动画过渡效果延迟时间(毫秒) */
8. triggerTime: 50, /* 事件触发延迟时间(毫秒) */
9. effect: "fade", /* 效果类型: fade | fold | slideDown | top | right | bottom | left */
10. eventType: "mouseover", /* 事件类型: mouseover | click */
11. easing: "swing", /* 缓动效果类型，更多效果请引用(jquery.easing.min.js) */
12. mainState: '.titList ul li', /* 导航列表元素 */
13. mainEl: '.textCont', /* 内容元素 */
14. mPrevOffClass: 'prevStop', /* 屏蔽mPrev按钮样式 */
15. mNextOffClass: 'nextStop', /* 屏蔽mNext按钮样式 */
16. mPrev: ".prevBtn", /* 切换按钮，上一个 */
17. mNext: ".nextBtn" /* 切换按钮，下一个 */
18. });
19. </script>
注意：1、当 pnLoop: false 上下按钮第一个和最后一个为时，将不再循环，建议 loop: false。
2、visNum（默认1）可视化显示数量
3、scrollNum（默认1）每次滚动的数量，一般不超过 visNum（可视化数量）
1. <script type="text/javascript">
2. $(".domo-pic-scroll-lr").agilebins({
3. autoPage: true, /* 自动分页，与pageState配合使用 */
4. autoPlay: true, /* 自动播放(true | false) */
5. pnLoop: true, /* 是否需要按钮前后循环(true | false) */
6. loop: true, /* 无限循环播放(true | false) */
7. hoverIsBtn:false, /* 当鼠标悬浮在容器区域内，是否显示按钮(true | false) */
8. direction:"left", /* 滑动方向（当type为slide时有效）: top向上|right向右|bottom向下| left向左 */
9. delayTime:3000, /* 自动播放延迟时间(毫秒)，注意：delayTime >= speed >= 0 */
10. sSpeed: 500, /* 播放过渡效果延迟时间(毫秒)，scrollEl容器列表 */
11. visNum: 4, /* 显示个数 */
12. pageState: ".tabs ul", /* 滚动列表集合所产生的分组页 */
13. onClass:"current", /* 当前选中的索引亮高css样式名 */
14. scrollEl: ".conts", /* 滚动列表容器元素 */
15. pageCountState:'.pageNav', /* 统计显示滚动分组(页)总数容器元素 */
16. sPrev: ".prev", /* 滚动按钮HTML元素，上一组(页)，配合scrollEl参数一同使用 */
17. sNext: ".next" /* 滚动按钮HTML元素，下一组(页)，配合scrollEl参数一同使用 */
18. });
19. </script>
注意：1、triggerTime >= speed 否则会事件冲突，导致效果无效 2、curOff: true
允许关闭当前打开元素，反之为“false”禁止关闭已打开元素，与此同时建议将 eventType: click 达到更好效果
1. <script type="text/javascript">
2. $(".demo-accordion").agilebins({
3. autoPlay: false, /* 自动播放(true | false) */
4. mainCur: true, /* 当前设置的(mainEl,scrollEl)容器元素本身为列表集合元素(true | false) */
5. curOff: true, /* 当前选中的元素，是否允许隐藏(关闭): (true | false) */
6. delayTime: 3500, /* 自动播放延迟时间(毫秒)，注意：delayTime >= speed >= 0 */
7. speed: 350, /* 动画过渡效果延迟时间(毫秒) */
8. triggerTime: 50, /* 事件触发延迟时间(毫秒) */
9. effect: "slideDown", /* 效果类型: fade | fold | slideDown | top | right | bottom | left */
10. easing: "swing", /* 缓动效果类型，更多效果请引用(jquery.easing.min.js) */
11. eventType: "click", /* 事件类型: mouseover | click */
12. mainState: 'h3', /* 导航列表元素 */
13. mainEl: 'ul' /* 切换内容容器元素 */
14. });
15. </script>
注意：1、当 pnLoop: false 上下按钮第一个和最后一个为时，将不再循环，建议 loop: false。
2、必须 triggerTime >= speed 否则会事件冲突，导致效果无效
3、index（从0开始）默认下显示哪一个
1. <script type="text/javascript">
2. $(".domo-slides").agilebins({
3. autoPlay: true, /* 自动播放(true | false) */
4. delayTime: 3000, /* 自动播放延迟时间(毫秒)，注意：delayTime >= speed >= 0 */
5. pnLoop: true, /* 是否需要按钮前后循环(true | false) */
6. loop: true, /* 无限循环播放(true | false) */
7. play: ".play", /* 播放按钮元素 */
8. pause: ".pause", /* 暂停按钮元素 */
9. mainEl: ".conts ul", /* 内容列表容器 */
10. mainState: ".tabs ul", /* 导航列表容器 */
11. autoMainState: true, /* 是否开启自动填充导航HTML元素。与mainState配合使用。 */
12. onClass: "current", /* 当前选中的索引亮高css样式名 */
13. pageCountState: '.pageNav', /* 统计显示滚动分组(页)总数容器元素 */
14. mPrev: ".prev", /* 上一个按钮元素 */
15. mNext: ".next", /* 下一个按钮元素 */
16. effect: "left", /* 效果类型: fade | fold | slideDown | top | right | bottom | left */
17. });
18. </script>
注意：1、当 pnLoop: false 上下按钮第一个和最后一个为时，将不再循环，建议 loop: false。
2、visNum（默认1）可视化显示数量
3、 scrollNum（默认1）每次滚动的数量，一般不超过visNum（可视化数量）
1. <script type="text/javascript">
2. $(".domo-textTopDown").agilebins({
3. autoPlay: true, /* 自动播放(true | false) */
4. loop: true, /* 无限循环播放(true | false) */
5. pnLoop: true, /* 是否需要按钮前后循环(true | false) */
6. delayTime: 2000, /* 自动播放延迟时间(毫秒)，注意：delayTime >= speed >= 0 */
7. sSpeed: 350, /* 播放过渡效果延迟时间(毫秒) */
8. visNum: 5, /* 显示个数 */
9. scrollNum: 1, /* 每次滚动为1个，一般不超过visNum设置的个数 */
10. eventType: "mouseover", /* 事件类型: mouseover | click */
11. direction: 'top', /* 滑动方向（当type为slide时有效）: top向上|right向右|bottom向下| left向左 */
12. pageState: '.textList ul', /* 滚动列表集合所产生的分组页 */
13. scrollEl: '.textCont ul', /* 滚动列表容器元素 */
14. sPrev: ".prevBtn", /* 滚动按钮HTML元素，上一组(页)，配合scrollEl参数一同使用 */
15. sNext: ".nextBtn", /* 滚动按钮HTML元素，下一组(页)，配合scrollEl参数一同使用 */
16. sPrevOffClass: 'prevStop', /* 屏蔽sPrev按钮css样式名 */
17. sNextOffClass: 'nextStop', /* 屏蔽sNext按钮css样式名 */
18. autoPage: true, /* 自动分页，与pageState配合使用 */
19. pageCountState: '.pageCount' /* 统计显示滚动分组(页)总数容器元素 */
20. });
21. </script>
注意：1、当 pnLoop: false 上下按钮第一个和最后一个为时，将不再循环，建议 loop: false
2、必须 triggerTime >= speed 否则会事件冲突，导致效果无效
1. <script type="text/javascript">
2. $(".domo-focus-pic").agilebins({
3. autoPlay: true, /* 自动播放(true | false) */
4. mouseOverStop: true, /* 当鼠标悬浮在容器内，暂停播放(true | false) */
5. loop: true, /* 无限循环播放(true | false) */
6. pnLoop: true, /* 是否需要按钮前后循环(true | false) */
7. direction: "left", /* 滑动方向（当type为slide时有效）: top向上|right向右|bottom向下| left向左 */
8. delayTime: 3800, /* 自动播放延迟时间(毫秒)，注意：delayTime >= speed >= 0 */
9. triggerTime: 50, /* 事件触发延迟时间(毫秒) */
10. effect: "left", /* 效果类型: fade | fold | slideDown | top | right | bottom | left */
11. speed: 350, /* 动画过渡效果延迟时间(毫秒) */
12. easing: "swing", /* 缓动效果类型，更多效果请引用(jquery.easing.min.js) */
13. eventType: "click", /* 事件类型: mouseover | click */
14. mainEl: '.textCont ul', /* 切换内容容器元素 */
15. mPrev: ".prevBtn", /* 上一个按钮元素 */
16. mNext: ".nextBtn", /* 下一个按钮元素 */
17. scrollEl: ".smallCont ul", /* 滚动列表容器元素 */
18. sPrev: ".sPrev", /* 滚动按钮HTML元素，上一组(页)，配合scrollEl参数一同使用 */
19. sNext: ".sNext", /* 滚动按钮HTML元素，下一组(页)，配合scrollEl参数一同使用 */
20. visNum: 4, /* 显示个数 */
21. scrollNum: 4, /* 每次滚动为4个，一般不超过visNum设置的个数 */
22. scrollWithMain: true, /* 开启组图，是否同时开启mainEl和scrollEl结合使用。当在组图展示效果时，比较实用。 */
23. startFunc: function(){ /* 执行动画效果之前时的回调扩展函数。 */
24. if(!window.currentFlag) { /* 初始化扩展 */
25. var __tmp = $(".domo-focus-pic");
26. __tmp.find(".textCont li").first().before( __tmp.find(".textCont li").last() );
27. __tmp.hover(function(){jQuery(this).find(".prevNext").stop(true,true).fadeIn(0) },function(){
28. jQuery(this).find(".prevNext").fadeOut(0) }
29. );}/* 鼠标放上显示箭头 */
30. window.currentFlag = true; /* /* 记录已初始化扩展 */
31. }});
32. </script>
注意：1、当 pnLoop: false 上下按钮第一个和最后一个为时，将不再循环，建议 loop: false。
2、visNum（默认1）可视化显示数量
3、scrollNum（默认1）每次滚动的数量，一般不超过 visNum（可视化数量）
1. <script type="text/javascript">
2. $(".domo-picScroll-up").agilebins({
3. autoPlay: true, /* 自动播放(true | false) */
4. loop: true, /* 无限循环播放(true | false) */
5. pnLoop: true, /* 是否需要按钮前后循环(true | false) */
6. sSpeed: 350, /* 播放过渡效果延迟时间(毫秒) */
7. visNum: 3, /* 显示个数 */
8. scrollNum: 1, /* 每次滚动为1个，一般不超过visNum设置的个数 */
9. direction: 'top', /* 滑动方向（当type为slide时有效）: top向上|right向右|bottom向下| left向左 */
10. eventType: "mouseover", /* 事件类型: mouseover | click */
11. pageState: '.textList ul', /* 滚动列表集合所产生的分组页 */
12. scrollEl: '.textCont ul', /* 滚动列表容器元素 */
13. sPrev: ".prevBtn", /* 滚动按钮HTML元素，上一组(页)，配合scrollEl参数一同使用 */
14. sNext: ".nextBtn", /* 滚动按钮HTML元素，下一组(页)，配合scrollEl参数一同使用 */
15. sPrevOffClass: 'prevStop', /* 屏蔽sPrev按钮css样式名 */
16. sNextOffClass: 'nextStop', /* 屏蔽sNext按钮css样式名 */
17. autoPage: true, /* 自动分页，与pageState配合使用 */
18. pageCountState: '.pageNav', /* 统计显示滚动分组(页)总数容器元素 */
19. });
20. </script>
Agilebins是一个基于jQuery运行的开源特效插件，快速解决网页大部分特效。使用简单，维护方便。无需懂得js代码编写。轻松制作，导航菜单、幻灯片、焦点图、公告跑马灯、图片滚动，选项卡内容切换、手风琴折叠效果等。兼容 IE6+ Safari Opera Firefox Chrome 等大部分浏览器。