fractionslider-带多重动画效果的jQuery幻灯片插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

jquery.fractionslider是一款可以实现多重动画效果的jQuery幻灯片插件。该幻灯片插件的每一个slide中都可以制作多个元素动画，每一个元素可以有不同的运动方向和运动速度，并且该幻灯片插件还是响应式的。它的特点还有：

每个slide中不限制动画元素的个数。
元素动画可以设置不同的动画过渡效果。
不限制幻灯片的数量。
所有的动画元素都可以被控制。
兼容IE8+的所有现代浏览器。

使用方法

使用该幻灯片插件需要在页面中引入jquery，jquery.fractionslider.js和fractionslider.css文件。

<link rel="stylesheet" href="css/fractionslider.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fractionslider.js"></script>

HTML结构

在该幻灯片的HTML结构中，每一个div.slide元素是一个幻灯片页面，在每一个slide中，可以组合多个图片和文本段落元素。

<div class="slider">
  <div class="slide"> 
  <img src="images/01_box_top.png" width="361" height="354" 
            data-position="-152,142" data-in="left" data-delay="200"> 

  <img src="images/01_box_bottom.png" width="422" height="454" 
            data-position="138,-152" data-in="bottomLeft" data-delay="200"> 

  <img src="images/01_waves.png" width="1449" height="115" 
            data-position="240,17" data-in="left" data-delay="">

  <p data-position="30,30" data-in="top" data-step="1" data-speed="500"
     data-out="top" data-ease-in="easeOutBounce">jQuery Fraction Slider</p>

  <p data-position="90,30" data-in="left" data-step="2" data-speed="500" 
      data-delay="500">animate multiple elements</p>

  <p data-position="90,30" data-in="left" data-step="2" data-special="cycle"
     data-speed="500" data-delay="3000">full control over each element</p>

  <p data-position="90,30" data-in="left" data-step="2" 
  data-special="cycle" data-speed="500" data-delay="4500">opensource and free</p>

  <img src="images/01_outofthebox.png" width="652" height="559" 
            data-position="20,330" data-in="bottomLeft" data-delay="500"> 
  </div>
  ......
</div>

其中，data-*属性的含义为：

data-in：控制元素的进入方向。
data-position：元素的位置。
data-delay：元素动画的延迟时间。
data-speed：动画的速度。
data-step：元素动画执行的先后顺序。
data-special：执行特殊的动画。

初始化插件

在页面DOM元素加载完毕之后，可以通过fractionSlider()方法来初始化该幻灯片插件。

$(window).load(function(){
  $('.slider').fractionSlider({
    'fullWidth': true // Full width, true of false
  });
});

配置参数

该幻灯片插件的配置参数有：

参数	默认值	描述
slideTransition	'none'	幻灯片的动画过渡效果
slideTransitionSpeed	2000	幻灯片的动画过渡持续时间
slideEndAnimation	true	如果设置为true，元素会在slideTransition参数调用之前出现在slide的末尾
position	'0,0'	元素默认的位置
transitionIn	'left'	默认的进入动画
transitionOut	'left'	默认的离开动画
fullWidth	false	是否占据整个屏幕的宽度
delay	0	元素动画的延迟时间
timeout	2000	幻灯片切换的间隔时间
speedIn	2500	in动画过渡的速度
speedOut	2000	out动画过渡的速度
easeIn	'easeOutExpo'	默认的easing in效果
'easeOut'	'easeOutCubic'	默认的easing out效果
controls	false	是否显示控制按钮
pager	false	是否显示分页按钮
autoChange	true	是否自动播放
pauseOnHover	false	是否在鼠标滑过是停止自动播放
backgroundAnimation	false	是否使用背景动画
backgroundElement	null	默认的fractionSlider动画元素
backgroundX	500	X方向的距离
backgroundY	500	Y方向的距离
backgroundSpeed	2500	背景动画的速度
responsive	false	是否启用响应式幻灯片设计
increase	false	if set, slider is allowed to get bigger than basic dimensions
dimensions	''	为响应式幻灯片设置基本的尺寸（宽度和高度，单位像素）。插件会将元素放置爱data-position属性指定位置的相对位置