仿当当移动端筛选

所属分类:UI-筛选及排序

 11313  61  查看评论 (1)
仿当当移动端筛选 ie兼容8

筛选分类的子类没有限制,可以没有子类,可以多达6级甚至更多子类,无需任何设置,样式和js都已经做好了。

导航和分类的显示隐藏就不细说了,非常的简单。导航是使用CSS3的transition过渡属性做的,分类则是使用jQuery的animate()动画函数做的。

一级分类的滑动使用了Swiper插件,官网有API,这里简单的介绍一下使用了哪些方法:

/*分类滑动与切换*/
var categorySwiper = new Swiper(".wap-category-nav", { //新建Swiper
    direction: "vertical",
    //纵向滚动
    slidesPerView: "auto",
    //幻灯片视图高度(宽度)自动
    onSlideChangeEnd: function(swiper) { //切换结束后
        var categoryAct = categorySwiper.activeIndex; //获得当前一级分类的索引
        $(".wap-category-sec").eq(categoryAct).show().siblings().hide(); //显示当前一级分类对应的二级分类,隐藏其他的二级分类
    },
    onTap: function(swiper, event) { //点击事件
        var categoryAct = categorySwiper.clickedIndex; //获得被点击的一级分类的索引
        categorySwiper.slideTo(categoryAct, 1000, false); //把被点击的一级分类滚动到顶部
        $(".wap-category-nav ul li").eq(categoryAct).addClass("swiper-slide-active").siblings("li").removeClass("swiper-slide-active");
        $(".wap-category-sec").eq(categoryAct).show().siblings().hide(); //显示当前一级分类对应的二级分类,隐藏其他的二级分类
    }
});


相关插件-筛选及排序

jQuery筛选列表过滤插件Filterizr

Filterizr 是一款基于 jQuery 的筛选过滤插件,它提供了多重筛选过滤方式,能够满足你的不同需求。并且使用了 CSS3 过滤效果,使用户体验更优秀。
  筛选及排序
 13398  117

jQuery过滤 分类 排序插件MixItUp

MixItUp是一种重量轻但功能强大的 jQuery插件,提供美丽的动画过滤和分类 排序内容。它起着很好的与现有的HTML和CSS,使其成为一个伟大的选择流体,响应布局。这是完美的组合,画廊,博客,或任何分类或排序内容!
  筛选及排序
 22726  82

纯CSS3炫酷圆形头像图片过滤特效

这是一款效果非常酷的纯CSS3炫酷圆形头像图片过滤特效。该特效将图片制作为圆形图片,以网格形式布局,带点击相应的分类按钮后,该类别的图片被放大显示,其它类别的图片被缩小,效果非常的不错。
  筛选及排序
 5393  26

angular过滤搜索

angular主要用于对数据的过滤搜索,代码注释很全,适合新手学习
  筛选及排序
 6964  32

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币

    Shadow 0
    2017/12/8 13:45:53
取消回复