这是一款炫酷的jQuery和css3全屏切开页面效果幻灯片插件。插件中使用了jQuery cond。jQuery cond是Ben Alman写的,它是一个“if-then-else”链式结构的jQuery插件。插件中那些可以动画的图标来自于Alan Carr。
HTML
包裹div给它一个class为sl-slide-wrapper
,每一个slide都带有class为sl-slide
。demo中有两种类型的导航按钮:箭头和圆点。
<div id="slider" class="sl-slider-wrapper">
<div class="sl-slider">
<div class="sl-slide bg-1">
<div class="sl-slide-inner">
<div class="deco" data-icon="H"></div>
<h2>A bene placito</h2>
<blockquote>
<p>You have just dined...</p>
<cite>Ralph Waldo Emerson</cite>
</blockquote>
</div>
</div>
<div class="sl-slide bg-2">
<div class="sl-slide-inner">
<div class="deco" data-icon="q"></div>
<h2>Regula aurea</h2>
<blockquote>
<p>Until he extends the circle...</p>
<cite>Albert Schweitzer</cite>
</blockquote>
</div>
</div>
<div class="sl-slide bg-2">
<!-- ... -->
</div>
<!-- ... -->
</div>
<nav id="nav-arrows" class="nav-arrows">
<span class="nav-arrow-prev">Previous</span>
<span class="nav-arrow-next">Next</span>
</nav>
<nav id="nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>
</div>
每一个slide都有一些自己的data-attributes,它们用于控制各自不同的效果,如旋转角度、缩放等等。下面列出所有的data-attributes:
data-orientation
data-slice1-rotation
data-slice2-rotation
data-slice1-scale
data-slice2-scale
data-orientation可以设置为 “vertical” 或 “horizontal” 。data-slice1-rotation和data-slice2-rotation是设置旋转角度的。data-slice1-scale和data-slice2-scale用于设置缩放值。
所以,第一个slide的html结构如下:
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
上面的html结构是一个基本结构,为了能产生动画效果,我们需要使用javascript在运行时将结构改变为如下:
<div id="slider" class="sl-slider-wrapper">
<div class="sl-slider">
<div class="sl-slides-wrapper">
<div class="sl-slide bg-1 sl-slide-horizontal">
<div class="sl-content-wrapper">
<div class="sl-content">
<!-- the content -->
</div>
</div>
</div>
<!-- ... -->
</div>
</div>
<!-- navs -->
</div>
页面中的所有内容将被放到sl-slide-inner
中。
在这时候,当我们点击下一个幻灯片或前一个幻灯片时,我们将以当前的幻灯片的内容来做页面切割:
<div class="sl-slide sl-slide-horizontal" >
<div class="sl-content-slice">
<div class="sl-content-wrapper">
<div class="sl-content">
<!-- ... -->
</div>
</div>
</div>
<div class="sl-content-slice">
<div class="sl-content-wrapper">
<div class="sl-content">
<!-- ... -->
</div>
</div>
</div>
</div>
可用参数
下面是一些可用的参数:
$.Slitslider.defaults = {
// transitions speed
speed : 800,
// if true the item's slices will also animate the opacity value
optOpacity : false,
// amount (%) to translate both slices - adjust as necessary
translateFactor : 230,
// maximum possible angle
maxAngle : 25,
// maximum possible scale
maxScale : 2,
// slideshow on / off(自动播放,默认关闭)
autoplay : false,
// keyboard navigation(键盘导航,默认开启)
keyboard : true,
// time between transitions
interval : 4000,
// callbacks
onBeforeChange : function( slide, idx ) { return false; },
onAfterChange : function( slide, idx ) { return false; }
};
CSS代码请参考下载文件。