jQuery および CSS3 レスポンシブ TAB タブ スタイルのスライドショー Effects_html/css_WEB-ITnose

簡単なチュートリアル

これは、jQuery と CSS3 アニメーションを使用して作成されたクールなレスポンシブ TAB タブ スタイルのスライドショー効果です。スライド効果は TAB タブを使用して切り替えます。スライド内の要素には、切り替わるたびに非常にクールな CSS3 アニメーション効果が適用されます。

デモを見る プラグインのダウンロード

ブラウザの互換性

使い方

HTML 構造

この TAB スタイル スライドの基本的な HTML 構造は次のとおりです:

<div class="tabSlider">  <div class="ts-items">    <!-- 单个slide -->    <div class="ts-item is-active">      <div class="ts-banner">        <!-- 背景图片 -->        <img src="/static/imghwm/default1.png"  data-src="bg1.jpg"  class="lazy" alt="alt goes here" />      </div>      <div class="ts-container set-layout thumb-cont">          <div class="ts-thumbnail">          <img src="/static/imghwm/default1.png"  data-src="img1.png"  class="lazy" 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>    <!-- 单个slide -->    ......  </div>  <!--tab选项卡-->  <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 コードを通じて現在のスライドに .is-activeclass を動的に追加します。このクラスは、CSS3 アニメーションを .ts-item 要素の下のサムネイル、テキスト コンテンツ、およびボタンのサブ要素に追加します。

.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 を使用してタブ切り替え時の背景画像とイベントを制御し、対応するスライド スライドの対応するクラスを追加および削除します。

$(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 ホーム