jQuery和CSS3響應式TAB選項卡樣式幻燈片特效_html/css

來源：懂視網責編：小采時間：2020-11-27 16:37:02

jQuery和CSS3響應式TAB選項卡樣式幻燈片特效_html/css

jQuery和CSS3響應式TAB選項卡樣式幻燈片特效_html/css_WEB-ITnose:簡要教程這是一款使用jQuery和CSS3動畫制作的炫酷響應式TAB選項卡樣式幻燈片特效。該幻燈片特效采用TAB選項卡來進行切換，每次切換時slide中的元素都帶有非常炫酷的CSS3動畫效果。查看演示下載插件瀏覽器兼容性使用方法 HTML結構該T

推薦度：

點擊下載本文 文檔為doc格式

導讀jQuery和CSS3響應式TAB選項卡樣式幻燈片特效_html/css_WEB-ITnose:簡要教程這是一款使用jQuery和CSS3動畫制作的炫酷響應式TAB選項卡樣式幻燈片特效。該幻燈片特效采用TAB選項卡來進行切換，每次切換時slide中的元素都帶有非常炫酷的CSS3動畫效果。查看演示下載插件瀏覽器兼容性使用方法 HTML結構該T

簡要教程

這是一款使用jQuery和CSS3動畫制作的炫酷響應式TAB選項卡樣式幻燈片特效。該幻燈片特效采用TAB選項卡來進行切換，每次切換時slide中的元素都帶有非常炫酷的CSS3動畫效果。

查看演示下載插件

瀏覽器兼容性

使用方法

HTML結構

該TAB樣式幻燈片的基本HTML結構如下：

   標題 文本內容 ......   Slide 1
  Slide 2
  Slide 3

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之家

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jQuery和CSS3響應式TAB選項卡樣式幻燈片特效_html/css

推薦度：

點擊下載本文 文檔為doc格式

標簽： PPT 幻燈片 html

熱門焦點

jQuery和CSS3響應式TAB選項卡樣式幻燈片特效_html/css

jQuery和CSS3響應式TAB選項卡樣式幻燈片特效_html/css

jQuery和CSS3響應式TAB選項卡樣式幻燈片特效_html/css

最新推薦

猜你喜歡

熱門推薦