使用jQuery Swiper插件实现的移动应用模板

带底部导航条和横向、竖向滑动（swipe），带菜单和列表。

jquery, mobile, app, template

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3570
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$('.content').each(function() {
    var t = $(this),
        content = new Swiper(t, {
            scrollbar: t.find('.swiper-scrollbar'),
            direction: 'vertical',
            slidesPerView: 'auto',
            mousewheelControl: true,
            spaceBetween: 15,
            freeMode: true,
            grabCursor: true,
            onSliderMove: function(swiper) {
                if (swiper.activeIndex > 0) {
                    $('.nav,.bottom,.view').addClass('active');
                } else {
                    $('.nav,.bottom,.view').removeClass('active');
                }
            },
            onSlideChangeEnd: function(swiper) {
                if (swiper.activeIndex > 0) {
                    $('.nav,.bottom,.view').addClass('active');
                } else {
                    $('.nav,.bottom,.view').removeClass('active');
                }
            },
            onScroll: function(swiper) {
                if (swiper.activeIndex > 0) {
                    $('.nav,.bottom,.view').addClass('active');
                } else {
                    $('.nav,.bottom,.view').removeClass('active');
                }
            }
        });
})

view.params.control = nav;
nav.params.control = view;

编译

CSS

.app {
    width: 100%;
    height: 100vh;
    max-width: 320px;
    max-height: 568px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    overflow: hidden;
}
.nav {
    width: 100%;
    height: 70px;
    padding: 0 15px;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: 300ms;
    transition: 300ms;
    z-index: 2;
}
.nav .swiper-slide {
    width: 80px;
    height: 12.5px;
    opacity: 0.75;
    border-radius: 30px;
    background: #fff;
    position: relative;
    top: 50%;
    margin-top: -6.25px;
}
.nav .swiper-slide:nth-child(1) {
    width: 100px;
}
.nav .swiper-slide:nth-child(2) {
    width: 130px;
}
.nav .swiper-slide:nth-child(3) {
    width: 80px;
}
.nav .swiper-slide:nth-child(4) {
    width: 110px;
}
.nav .swiper-slide:nth-child(5) {
    width: 60px;
}
.nav .swiper-slide.swiper-slide-active {
    opacity: 1;
}
.nav.active {
    height: 40px;
    background: #1C3C45;
}
.view {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: #EB6173;
}
.view .swiper-slide {
    padding: 70px 15px 0px 15px;
    -webkit-transition: 300ms;
    transition: 300ms;
}
.view .swiper-slide .content {
    width: 100%;
    height: 100%;
}
.view .swiper-slide .content .swiper-slide {
    height: 80px;
    padding-top: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5);
}
.view .swiper-slide .content .swiper-slide:after,
.view .swiper-slide .content .swiper-slide:before,
.view .swiper-slide .content .swiper-slide div {
    content: "";
    height: 12.5px;
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 30px;
}
.view .swiper-slide .content .swiper-slide:before {
    width: 60px;
    top: 20px;
    right: 20px;
}
.view .swiper-slide .content .swiper-slide:after {
    width: 110px;
    bottom: 20px;
    left: 20px;
}
.view .swiper-slide .content .swiper-slide div {
    width: 150px;
    top: 20px;
    left: 20px;
    background: #fff;
}
.view .swiper-slide .content .swiper-slide:last-child {
    margin-bottom: 0 !important;
}
.view.active .swiper-slide {
    padding-top: 55px;
}
.bottom {
    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 0px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: 300ms;
    transition: 300ms;
    z-index: 3;
    text-align: center;
    font-size: 0;
    padding: 0 15px;
    background: #1C3C45;
}
.bottom a {
    width: 20%;
    height: 100%;
    display: inline-block;
    position: relative;
}
.bottom a:before,
.bottom a:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.bottom a:before {
    width: 20px;
    height: 20px;
    background: #EB6173;
}
.bottom a:after {
    width: 10px;
    height: 10px;
    background: #1C3C45;
}
.bottom a:nth-child(2):before,
.bottom a:nth-child(2):after,
.bottom a:nth-child(4):before,
.bottom a:nth-child(4):after {
    border-radius: 0;
}
.bottom a:nth-child(5):before {
    width: 25px;
    height: 4px;
    border-radius: 0;
    background: rgba(255, 191, 200, 0.5);
    box-shadow: 0 8px 0px 0px rgba(255, 191, 200, 0.5), 0 -8px 0px 0px rgba(255, 191, 200, 0.5);
}
.bottom a:nth-child(5):after {
    display: none;
}
.bottom.active {
    bottom: -50px;
}
body {
    background: #F1CECA;
    overflow: hidden;
}
*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
    outline: none;
    font-family: 'Roboto', sans-serif;
}

HTML

带底部导航条和横向、竖向滑动（swipe），带菜单和列表。

jquery, mobile, app, template

编辑器支持Emmet

快捷键

带底部导航条和横向、竖向滑动（swipe），带菜单和列表。

jquery, mobile, app, template

使用jQuery.Stapel.js插件实现自动分组的自适应缩略图片堆叠

使用jQuery Masonry插件实现的作品展示瀑布流模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：