jQuery Tabs选项卡插件带CSS3过渡动画效果-插件特效-星河码客

是一款带CSS3过渡动画效果的jQuery Tabs选项卡插件。它是轻量级插件，使用简单，采用响应式设计，并支持多种CSS3动画过渡效果。使用方法使用该Tabs选项卡插件需要在页面中引入jQuery、jQueryTab.css、animation.css和jQueryTab.js文件。 HTML结构Tabs选项卡的基本HTML结构如下：

General
Social Media
Copyright
Contact

General calidis mundum caligine coeperunt.

Social Media conversa egens spectent tum sed diremit haec.

Contact erat pugnabant diffundi pondere temperiemque.

初始化插件在页面DOM元素加载完毕之后，可以通过jQueryTab()方法来初始化该选项卡插件。$('.tabs-1').jQueryTab(); 创建Class动画类创建Tab的进入动画过渡类：.swingRightIn { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; opacity: 1; transition-delay: .3s;} 创建Tab的离开动画过渡类：.swingRightOut { -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0;} 然后可以在初始化该选项卡插件时传入这些class类。$('.tabs-1').jQueryTab({ tabInTransition: 'swingRightIn', tabOutTransition: 'swingRightOut', cookieName: 'active-tab-1'});

jQuery Tabs选项卡插件带CSS3过渡动画效果

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»