jQuery和css3全屏切开页面效果幻灯片插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery和css3全屏切开页面效果幻灯片插件
jQuery和css3全屏切开页面效果幻灯片插件
分享:

    插件介绍

    这是一款效果非常酷炫的jQuery和css3全屏切开页面效果幻灯片插件。该幻灯片插件通过参数设置可以自动播放。在切换幻灯片时页面被从中间切开,分成两半向两侧运动,下一张幻灯片从下方显示出来。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-26
    阅读:

简要教程

这是一款炫酷的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代码请参考下载文件。