jQuery和CSS3炫酷响应式滑动翻页特效插件

当前位置:主页 > jQuery库 > 布局和界面 > jQuery和CSS3炫酷响应式滑动翻页特效插件
jQuery和CSS3炫酷响应式滑动翻页特效插件
分享:

    插件介绍

    FKPageTransitions是一款效果非常炫酷的jQuery和CSS3响应式滑动翻页特效插件。该滑动翻页插件可以支持37种不同的翻页效果,文件体积小,支持多种设备,是制作页面切换效果的不错选择。

    浏览器兼容性

    浏览器兼容性
    时间:2015-05-20
    阅读:
简要教程

FKPageTransitions是一款效果非常炫酷的jQueryCSS3响应式滑动翻页特效插件。该滑动翻页插件可以支持37种不同的翻页效果,文件体积小,支持多种设备,是制作页面切换效果的不错选择。它的特点有:

  • 完全适应任何设备屏幕
  • 水平,垂直,和淡入等37种翻页效果
  • 可以包含图像,视频,HTML内容,或各种动画元素。
  • 充分回调API和公共方法
  • 小体积,自定义样式,简单的使用代码
  • 支持浏览器Firefox,Safari,Chrome,iOS,Android,IE9 +
  • 丰富的配置选项

使用方法

使用这个滑动翻页插件要先引入jQuery库。其次,引入fkpagetransitions.css和fkpagetransitions.min.js文件。

<!-- jQuery library -->
<script src="jquery/jquery.min.js"></script>
<!-- FKPageTransitions Javascript file -->
<script src="/js/fkpagetransitions.min.js"></script>
<!-- FKPageTransitions CSS file -->
<link href="/css/fkpagetransitions.css" rel="stylesheet" />              
              
HTML结构

创建一个<ul class="test"> 元素, 一个<li>为一个页面。页面中可以包含图像,视频,或任何其他HTML内容。

<ul class="test">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>              
              
初始化插件

在页面加载完毕之后,可以使用.FKPageTransitions()来初始化该页面切换插件。

$(document).ready(function(){
  $('.test').FKPageTransitions();
});              
              

配置参数

  • mode:页面切换动画的过渡效果。默认值为0,可选值[0-37]。单数为适合左右操作,双数适合上下操作。其中0、31、32、34、36、37可左右上下通用。
    • 0:淡入翻页(适合左右和上下操作)
    • 1、2:简单位移翻页
    • 3、4:新页位移入场旧页变暗位置不动
    • 5、6:新旧页同时位移旧页变暗
    • 7、8:新页位移入场旧页浮动位移
    • 9、10:新页位移入场旧页变小
    • 11、12:新页位移入场旧页揭下和9、10差不多
    • 13、14:旧页位移新页放大入场
    • 15、16:新页位移入场旧页顶下去
    • 17、18:新旧页同时面对面翻页入场和出场
    • 19、20:新旧页像盒子一样转动
    • 21、22:新旧页像盒子一样展开
    • 23、24:新旧页像在盒子里一样转动
    • 25、26:新旧页像盒子一样转动视角由小大变小再由小变大
    • 27、28:新旧页立体间飞行位移
    • 29、30:新页缩小和旧变大页翻转交错入场
    • 31:新页和旧页一起淡入效果同时变小(适合左右和上下操作)
    • 32:新页和旧页一起淡入效果同时变大(适合左右和上下操作)
    • 33:新旧页同时面对面翻页入场和出场周时变小与24差不多(适合左右)
    • 34:旧页固定顶角再掉落新页放大入场(适合左右和上下操作)
    • 35:旧页缩小移出新页移出放大入场(适合左右)
    • 36:新页缩小旧页变大交错入场(适合左右和上下操作)
    • 37:新页缩小和旧变大页旋转交错入场(适合左右和上下操作)
  • speed:动画过渡时间,单位毫秒。默认值:null,类型:integer
  • startSlide:启动页面的索引(从零开始)。默认值:null,类型:integer
  • slideSelector:滑动元素的选择器,如'div.slide'。默认情况下,bxslider将使用滑块元素的所有直接的子元素。默认值:' ',类型:jQuery selector。
  • infiniteLoop:如果为 true,单击“下一步”在最后一张幻灯片将过渡到第一张幻灯片,反之亦然。默认值:true,类型:boolean
  • easing:过程中使用的转换 "easing" 使用CSS转换, 值请参考 transition-timing-function 的参数说明。默认值:null
  • slideZIndex:初始z-index值。默认值:50,类型:integer
  • responsive:启用或禁用自动调整滑块。如果你需要使用固定宽度的滑块。默认值:true,类型:boolean
  • wrapperClass:翻页框架类名。防止有样式与FKPageTransitions冲突。默认值:'fk-page-wrapper',类型:string
  • mouseWheel:是否支持滚轮。默认值:true,类型:boolean
  • wheelThreshold:鼠标的灵敏度阀值。默认值:2,类型:integer
  • swipeThreshold:触摸灵敏度阀值。默认值:50,类型:integer
  • preventDefaultSwipeX:如果true,触摸屏沿x轴为手指操作(如果为falsepreventDefaultSwipeY也为false那么不响应touch事件)。默认值:true,类型:boolean
  • preventDefaultSwipeY:如果true,触摸屏沿y轴为手指操作(如果为falsepreventDefaultSwipeY也为false那么不响应touch事件)
  • pagerunstat:如果true,在翻页动画进行时禁止页面内元素动画渲染。默认值:true,类型:boolean

回调方法

  • onSliderLoad:加载完成时回调。
    • default: function(){}
    • options: function(currentIndex){ // 写你的代码 }
    • 参数:currentindex:当前幻灯片的元素的索引
  • onSliderResize:窗口发生变化时回调,前提[responsive=true]。
    • default: function(){}
    • options: function(currentIndex){ // 写你的代码 }
    • 参数:currentindex:当前幻灯片的元素的索引
  • onSlideBefore:在每动画过渡开始前回调。
    • default: function(){}
    • options: function(newIndex,oldIndex,newElement,oldElement){ // 写你的代码 }
    • 参数:currentindex:当前幻灯片的元素的索引;newIndex:当前页码;newElement:当前的jQuery元素;oldElement:之前的jQuery元素
  • onSlideAfter:在每动画过渡结束后回调。
    • default: function(){}
    • options: function(newIndex,oldIndex,newElement,oldElement){ // 写你的代码 }
    • 参数:currentindex:当前幻灯片的元素的索引;newIndex:当前页码;newElement:当前的jQuery元素;oldElement:之前的jQuery元素
  • onSlideNext:执行下一页时回调。
    • default: function(){}
    • options: function(newIndex,oldIndex,newElement,oldElement){ // 写你的代码 }
    • 参数:currentindex:当前幻灯片的元素的索引;newIndex:当前页码;newElement:当前的jQuery元素;oldElement:之前的jQuery元素
  • onSlidePrev:执行上一页时回调。
    • default: function(){}
    • options: function(newIndex,oldIndex,newElement,oldElement){ // 写你的代码 }
    • 参数:currentindex:当前幻灯片的元素的索引;newIndex:当前页码;newElement:当前的jQuery元素;oldElement:之前的jQuery元素

公共方法调用

  • goToSlide:执行一个幻灯片过渡到提供的幻灯片的索引(从零开始)。
  • goToNextSlide:执行“下一步”幻灯片过渡
  • goToPrevSlide:执行“上一页”的幻灯片过渡
  • getCurrentSlide:返回当前活动的幻灯片
  • getSlideCount:返回在滑块总幻灯片的数目
  • setSlideMode:动态设置新的翻页效果(0-37)
  • reloadSlider:重新装入滑块

插件作者:废客泉 https://github.com/feikeq/fkpagetransitions

作者新浪微博:http://feikeq.cn