Tab选项卡

jQuery + CSS3堆叠式Tab选项卡

阿里云


这是一款使用 jQuery 和 CSS3 制作的堆叠式 Tab 选项卡界面设计效果。该设计中所有的面板以不同的尺寸由小到大的堆叠在一起,当点击相应的面板后,这个面板会以过渡动画效果扩展到全屏大小。

HTML 结构:

该选项卡的 HTML 结构使用的是无序列表,每一个

也想出现在这里?联系我们
创客主机
  • 元素是一个面板。最后的 div.views-toggle 是面板全屏后显示的切换按钮。
    1. <ul class="tabs">
    2.   <li class="tabs__item color1">
    3.     <h2>Tony<span>...</span></h2>
    4.     <p class="tabs__num">...</p>
    5.     <p class="tabs__stats">
    6.       ...
    7.     </p>
    8.   </li>
    9.   ...
    10.   <div class="views-toggle views-toggle--hidden">
    11.     <svg fill="white" viewBox="0 0 24 24">
    12.      <path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/>
    13.    <path d="M0 0h24v24h-24z" fill="none"/>
    14.   </svg>
    15.   </div>
    16. </ul>

    CSS 样式:

    这个 Tab 选项卡效果的 CSS 样式中,整个 Tab 的高度设置为视口的高度,超出部分会被隐藏。每一个 Tab 面板都使用绝对定位,大小为视口的大小。最终效果中每一个 Tab 的大小都不一样,这是在 jQuery 代码中动态完成调整的。

    1. .tabs {
    2.   position: relative;
    3.   min-height: 100vh;
    4.   overflow: hidden;
    5. }
    6. .tabs__item {
    7.   will-change: transform, opacity, box-shadow;
    8.   position: absolute;
    9.   top: 0;
    10.   left: 0;
    11.   width: 100%;
    12.   height: 100%;
    13.   margin-bottom: 50px;
    14.   z-index: 1;
    15.   padding: 0 50px;
    16.   color: white;
    17.   box-shadow: 0 30px 60px transparent;
    18.   -webkit-transform-origin: center 5%;
    19.       -ms-transform-origin: center 5%;
    20.           transform-origin: center 5%;
    21.   overflow: hidden;
    22.   -webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    23.           transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    24. }

    其它的都是一些非常简单的设置。

    JAVASCRIPT 部分:

    jQuery 代码中,moveTabs 函数用于缩放 Tab,并移动到指定位置。switchTabs 函数是切换 Tab 的操作处理。

    1. var moveTabs = function (a) {
    2.     var transY, scale;
    3.     if (a) {
    4.         tabs.css({
    5.             'opacity': '1',
    6.             'box-shadow': '0 30px 60px rgba(0,0,0,0.4)',
    7.             'cursor': 'pointer'
    8.         });
    9.         tabs.each(function (index) {
    10.             transY = index * 10;
    11.             scale = 0.5 + index / 25;
    12.             transform($(this), 'translate3d(0,' + transY + 'vh, 0) scale(' + scale + ')');
    13.         });
    14.         toggler.addClass('views-toggle--hidden');
    15.     } else {
    16.         transform(tabs, 'translate3d(0,0,0) scale(1)');
    17.     }
    18. };
    19. var switchTabs = function () {
    20.     var selected = $(this);
    21.     var others = selected.siblings('li');
    22.     if (toggled) {
    23.         transition(others, 'transform 0.3s cubic-bezier(0.755, 0.05, 0.855, 0.06)');
    24.         transform(others, 'translate3d(0, 100%, 0) scale(1)');
    25.         transform(selected, 'translate3d(0,0,0) scale(1)');
    26.         tabs.css({
    27.             'box-shadow': '0 30px 60px rgba(0,0,0,0.4)',
    28.             'cursor': 'default'
    29.         });
    30.         toggled = false;
    31.         selected.on('transitionend webkitTransitionend', function () {
    32.             toggler.removeClass('views-toggle--hidden');
    33.             others.css({ 'opacity': '0' });
    34.             transform(others, 'translate3d(0, 100%, 0) scale(0)');
    35.             transition(others, 'transform 0.9s cubic-bezier(0.23, 1, 0.32, 1)');
    36.             selected.off('transitionend webkitTransitionend');
    37.         });
    38.     }
    39. };

    jQuery + CSS3 堆叠式 Tab 选项卡

    已有 479 人购买
    查看演示升级 VIP立刻购买

    演示地址 下载地址
  • 收藏
    (1)

    发表回复

    热销模板

    Ashade - 作品展示摄影相册WordPress汉化主题
    LensNews

    本站承接 WordPress / PbootCMS / DedeCMS 等
    系统建站、仿站、开发、定制等业务!