jQuery+CSS3选项卡TAB样式幻灯片特效

PetitQ 幻灯片/轮播 2018-11-06 1.76K 0 0

这是一款使用 jQuery 和 CSS3 动画制作的炫酷响应式 TAB 选项卡样式幻灯片特效。该幻灯片特效采用 TAB 选项卡来进行切换，每次切换时 slide 中的元素都带有非常炫酷的 CSS3 动画效果。

HTML 结构:

该 TAB 样式幻灯片的基本 HTML 结构如下：

也想出现在这里？联系我们吧

```
<div class="tabSlider">
```
```
  <div class="ts-items">
```
```
    
```
```
    <div class="ts-item is-active">
```
```
      <div class="ts-banner">
```
```
        
```

        <img src="bg1.jpg" alt="alt goes here" />

```
      </div>
```

      <div class="ts-container set-layout thumb-cont">

```
        <div class="ts-thumbnail">
```

          <img src="img1.png" alt="alt" />

```
        </div>
```
```
        <div class="ts-content">
```
```
          <div class="ts-title">
```
```
            标题
```
```
          </div>
```

          <a href="" class="ts-btn pull-right set-icon to-right">

```
            <span>文本内容</span>
```
```
          </a>
```
```
        </div>
```
```
      </div>
```
```
    </div>
```
```
    
```
```
    ......
```
```
  </div>
```
```
  
```
```
  <nav class="ts-control">
```
```
    <div class="ts-container">
```
```
      <ul>
```

        <li class="is-active"><i class="ts-icon auto"></i> <span>Slide 1</span></li>

        <li><i class="ts-icon medical"></i> <span>Slide 2</span></li>

        <li><i class="ts-icon food"></i> <span>Slide 3</span></li>

```
      </ul>
```
```
    </div>
```
```
  </nav>
```
```
</div>
```

CSS 样式:

在切换 TAB 选项卡时，通过 jQuery 代码为当前的 slide 动态添加.is-activeclass。这个 class 类会为.ts-item 元素下的缩略图、文本内容和按钮子元素分别添加 CSS3 动画。

.tabSlider .ts-items .ts-item.is-active {

```
  background-position: center center;
```
```
}
```

.tabSlider .ts-items .ts-item.is-active .ts-thumbnail img {

```
  -webkit-animation-name: vanishIn;
```
```
  -moz-animation-name: vanishIn;
```
```
  -ms-animation-name: vanishIn;
```
```
  -o-animation-name: vanishIn;
```
```
  animation-name: vanishIn;
```
```
}
```

.tabSlider .ts-items .ts-item.is-active .ts-title {

```
  -webkit-animation-name: presRIn;
```
```
  -moz-animation-name: presRIn;
```
```
  -ms-animation-name: presRIn;
```
```
  -o-animation-name: presRIn;
```
```
  animation-name: presRIn;
```
```
}
```

.tabSlider .ts-items .ts-item.is-active .ts-btn {

```
  -webkit-animation-name: button;
```
```
  -moz-animation-name: button;
```
```
  -ms-animation-name: button;
```
```
  -o-animation-name: button;
```
```
  animation-name: button;
```
```
}
```
```
/* vanishIn动画 */
```
```
@keyframes vanishIn {
```
```
  0% {
```

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

```
    opacity: 0;
```
```
    -moz-transform-origin: 50% 50%;
```
```
    -ms-transform-origin: 50% 50%;
```
```
    -webkit-transform-origin: 50% 50%;
```
```
    transform-origin: 50% 50%;
```
```
    -moz-transform: scale(2);
```
```
    -ms-transform: scale(2);
```
```
    -webkit-transform: scale(2);
```
```
    transform: scale(2);
```
```
    -webkit-filter: blur(10px);
```
```
    filter: blur(10px);
```
```
  }
```
```
  100% {
```

    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);

```
    opacity: 1;
```
```
    -moz-transform-origin: 50% 50%;
```
```
    -ms-transform-origin: 50% 50%;
```
```
    -webkit-transform-origin: 50% 50%;
```
```
    transform-origin: 50% 50%;
```
```
    -moz-transform: scale(1);
```
```
    -ms-transform: scale(1);
```
```
    -webkit-transform: scale(1);
```
```
    transform: scale(1);
```
```
    -webkit-filter: blur(0px);
```
```
    filter: blur(0px);
```
```
  }
```
```
}
```
```
/* button动画 */
```
```
@keyframes button {
```
```
  0% {
```

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

```
    opacity: 0;
```
```
    left: -90px;
```
```
  }
```
```
  100% {
```

    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);

```
    opacity: 1;
```
```
    left: 0;
```
```
  }
```
```
}
```
```
/* presRIn动画 */
```
```
@keyframes presRIn {
```
```
  0% {
```

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);

```
    opacity: 0;
```
```
    -moz-transform-origin: 50% 50%;
```
```
    -ms-transform-origin: 50% 50%;
```
```
    -webkit-transform-origin: 50% 50%;
```
```
    transform-origin: 50% 50%;
```

    -moz-transform: perspective(600) scale(0.3, 0.3) rotateY(90deg);

    -ms-transform: perspective(600) scale(0.3, 0.3) rotateY(90deg);

    -webkit-transform: perspective(600) scale(0.3, 0.3) rotateY(90deg);

    transform: perspective(600) scale(0.3, 0.3) rotateY(90deg);

```
  }
```
```
  60% {
```

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);

```
    opacity: 0.4;
```
```
    -moz-transform-origin: 50% 50%;
```
```
    -ms-transform-origin: 50% 50%;
```
```
    -webkit-transform-origin: 50% 50%;
```
```
    transform-origin: 50% 50%;
```

    -moz-transform: perspective(600) scale(0.7, 0.7) rotateY(0deg);

    -ms-transform: perspective(600) scale(0.7, 0.7) rotateY(0deg);

    -webkit-transform: perspective(600) scale(0.7, 0.7) rotateY(0deg);

    transform: perspective(600) scale(0.7, 0.7) rotateY(0deg);

```
  }
```
```
  70% {
```

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);

```
    opacity: 0.7;
```
```
    -moz-transform-origin: 50% 50%;
```
```
    -ms-transform-origin: 50% 50%;
```
```
    -webkit-transform-origin: 50% 50%;
```
```
    transform-origin: 50% 50%;
```

    -moz-transform: perspective(600) scale(1, 1) rotateY(10deg);

    -ms-transform: perspective(600) scale(1, 1) rotateY(10deg);

    -webkit-transform: perspective(600) scale(1, 1) rotateY(10deg);

    transform: perspective(600) scale(1, 1) rotateY(10deg);

```
  }
```
```
  75% {
```

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

```
    opacity: 0.8;
```
```
    -moz-transform-origin: 50% 50%;
```
```
    -ms-transform-origin: 50% 50%;
```
```
    -webkit-transform-origin: 50% 50%;
```
```
    transform-origin: 50% 50%;
```

    -moz-transform: perspective(600) scale(1, 1) rotateY(-10deg);

    -ms-transform: perspective(600) scale(1, 1) rotateY(-10deg);

    -webkit-transform: perspective(600) scale(1, 1) rotateY(-10deg);

    transform: perspective(600) scale(1, 1) rotateY(-10deg);

```
  }
```
```
  90% {
```

    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);

```
    opacity: 0.9;
```
```
    -moz-transform-origin: 50% 50%;
```
```
    -ms-transform-origin: 50% 50%;
```
```
    -webkit-transform-origin: 50% 50%;
```
```
    transform-origin: 50% 50%;
```

    -moz-transform: perspective(600) scale(1, 1) rotateY(5deg);

    -ms-transform: perspective(600) scale(1, 1) rotateY(5deg);

    -webkit-transform: perspective(600) scale(1, 1) rotateY(5deg);

    transform: perspective(600) scale(1, 1) rotateY(5deg);

```
  }
```
```
  100% {
```

    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);

```
    opacity: 1;
```
```
    -moz-transform-origin: 50% 50%;
```
```
    -ms-transform-origin: 50% 50%;
```
```
    -webkit-transform-origin: 50% 50%;
```
```
    transform-origin: 50% 50%;
```

    -moz-transform: perspective(600) scale(1, 1) rotateY(0deg);

    -ms-transform: perspective(600) scale(1, 1) rotateY(0deg);

    -webkit-transform: perspective(600) scale(1, 1) rotateY(0deg);

    transform: perspective(600) scale(1, 1) rotateY(0deg);

```
  }
```
```
}
```

CSS 样式中还使用媒体查询来制作响应式效果，完整的 CSS 代码请参考 style.css 文件。

JAVASCRIPT:

该 TAB 选项卡幻灯片特效使用 jQuery 来控制背景图片和 tab 选项卡切换时的事件，为相应的幻灯片 slide 添加和移除相应的 class。

```
$(function(){
```

    $('a').on('click', function(){ return false; });

```
    $('.ts-item').first().show();
```
```
    $('.ts-item').each(function () {
```
```
        var $this = $(this),
```

            _imgSrc  = $this.find('.ts-banner img').attr('src');

```
 
```
```
        if(_imgSrc)
```

        $this.css('background-image', 'url(' + _imgSrc + ')');

```
    });
```
```
 
```

    $('.ts-control li').on('click', function(){

```
        var  $this = $(this),
```
```
            _index = $this.index();
```
```
 
```

          $("li.is-active").removeClass("is-active");

          $(this).addClass("is-active");

```
 
```

          $('.ts-item.is-active').removeClass('is-active').fadeOut();

          $('.ts-item').eq(_index).addClass('is-active').fadeIn();

```
 
```
```
        return false;
```
```
    });
```
```
    var ww = $(window).width();
```
```
  });
```

jQuery+CSS3 选项卡 TAB 样式幻灯片特效

已有 440 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

jQuery+CSS3选项卡TAB样式幻灯片特效

HTML 结构:

CSS 样式:

JAVASCRIPT:

jQuery+CSS3 选项卡 TAB 样式幻灯片特效

相关文章

CamRoll Slider 图片轮播幻灯片jQuery插件

jQuery+CSS3全屏缩放切换幻灯片特效

基于JSON数据简单jQuery幻灯片插件

发表回复取消回复

热销模板

幻灯片/轮播

HTML 结构:

CSS 样式:

JAVASCRIPT:

jQuery+CSS3 选项卡 TAB 样式幻灯片特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复