JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > MixItUp功能强大的jQuery画廊插件

MixItUp功能强大的jQuery画廊插件

JQUERY教程  手机阅读

 

  

      MixItUp是一个轻量级但功能强大的jQuery画廊插件,提供了美丽的动画分类和有序的内容过滤和排序。与您现有的HTML和CSS,它有着很好的流畅,反应灵敏的布局。这是完美的组合,画廊,博客,或任何内容!

 HTML

<ul>

    <li class="sort" data-sort="data-name" data-order="desc"></li>

    <li class="sort" data-sort="data-name" data-order="asc"></li>

    <li class="sort" data-sort="data-age" data-order="desc"></li>

    <li class="sort" data-sort="data-age" data-order="asc"></li>

    <li class="sort" data-sort="default" data-order="asc"></li>

    <li class="sort" data-sort="random"></li>

</ul>


JS

$('#Grid').mixitup({

    targetSelector: '.mix',

    filterSelector: '.filter',

    sortSelector: '.sort',

    buttonEvent: 'click',

    effects: ['fade','scale'],

    listEffects: null,

    easing: 'smooth',

    layoutMode: 'grid',

    targetDisplayGrid: 'inline-block',

    targetDisplayList: 'block',

    gridClass: '',

    listClass: '',

    transitionSpeed: 600,

    showOnLoad: 'all',

    sortOnLoad: false,

    multiFilter: false,

    filterLogic: 'or',

    resizeContainer: true,

    minHeight: 0,

    failClass: 'fail',

    perspectiveDistance: '3000',

    perspectiveOrigin: '50% 50%',

    animateGridList: true,

    onMixLoad: null,

    onMixStart: null,

    onMixEnd: null

});

在线演示

【MixItUp功能强大的jQuery画廊插件】相关文章

1. MixItUp功能强大的jQuery画廊插件

2. MixItUp功能强大的jQuery画廊插件

3. jQuery简单且功能强大的图片剪裁插件

4. jQuery的堆叠图像画廊插件

5. jQuery的堆叠图像画廊插件

6. Mozilla发布“BrowserQuest”证明HTML5的功能强大

7. Parsley:功能强大且易用的 JS 表单验证插件

8. 一款功能强大并且可以结合html5实现本地存储的数据库 – SQLite学习文档 ... ...

9. 10 个强大的JavaScript / jQuery 模板引擎推荐

10. 强大的响应jQuery滑块插件LayerSlider

本文来源:https://www.51html5.com/a1181.html

点击展开全部
上一篇:CSS3+jQuery的互动走势图 下一篇:jQuery的响应式滑块滑动unslider

﹝MixItUp功能强大的jQuery画廊插件﹞相关内容

「MixItUp功能强大的jQuery画廊插件」相关专题

sort jquery
复制网址 收藏网址 分享到微信 分享到微博 分享到QQ

其它栏目

HTML5教程 CSS3教程 JQUERY教程

也许您还喜欢