「Rosie Anne」

Rosie Anne

Rosie Anne – 英国女摄影师

01

02

03

04

05

「Oleg Oprisco」

Oleg Oprisco

Oleg Oprisco – 乌克兰摄影师

01

02

03

04

05

「Raul Romo」

Raul Romo

Raul Romo – 美国女摄影师

01

02

03

04

05

「Sisilia Piring」

Sisilia Piring

Sisilia Piring – 美国女摄影师

01

02

03

04

05

「灵活的滑动至顶部手风琴效果」

FlexibleSlideToTopAccordion

原文:FLEXIBLE SLIDE-TO-TOP ACCORDION

在今天的教程中,我们将创建一个简单的响应式手风琴效果,当展开时,将滚动到视口的顶部并且通过淡入方式显示内容。我们的想法是避免用户不得不去滚动内容区域到相应相应位置。当点击一个项目时,我们还将给箭头的出现和旋转添加一些漂亮的CSS3过渡效果。该手风琴效果是灵活的,这意味着它有一个液体宽度来调整到屏幕尺寸。

演示demo源码下载

标记

HTML结构将包含一个class名和id名都为st-accordion的包装容器和一个无序列表。列表项将有一个link元素作为项目标题和内容区域,并且最初是隐藏的。class名为st-arrow的span元素的右边有一个小的箭头指示器,当鼠标悬停到它的父级也就是链接元素时它就会出现。


<div id="st-accordion" class="st-accordion">
    <ul>
        <li>
            <a href="#">
                Item Title
                <span class="st-arrow">Open or Close</span>
            </a>
            <div class="st-content">
                <p>Some content</p>
            </div>
        </li>
        <li> ... </li>
    </ul>
</div>

接下来让我们看下样式。

CSS

首先我们来定义主包装容器的样式,给它一个100%的宽度,因为我们希望它适应外围包装器的宽度。如果你不想这样,只需要使用一个适当的百分比(如果你希望它是流体的)。在演示中的外围包装器有一个最大宽度为800像素和一个90%的宽度。st-accordion的最小宽度为270像素:


.st-accordion{
    width:100%;
    min-width:270px;
    margin: 0 auto;
}

假设我们有某种复位css,它将移除无序列表的填充和外边距等等,我们为每个列表元素定义样式。我们将设置一个初始高度100像素作为基本的链接元素的高度,并且当溢出时隐藏,所以我们将不会看到内容。当我们打开该列表项时,我们将给高度添加动画效果以显示内容。我们给元素设的边框,将创建造一个很好的项目之间的隔离效果。


.st-accordion ul li{
    height: 100px;
    border-bottom: 1px solid #c7deef;
    border-top:1px solid #fff;
    overflow: hidden;
}

第一项应该没有顶部边框:


.st-accordion ul li:first-child{
    border-top:none;
}

我们将给链接元素添加一个颜色过渡以便当鼠标悬停时创建一个好的效果,行高应该与列表元素的初始高度保持一致:


.st-accordion ul li > a{
    font-family: 'Josefin Slab',Georgia, serif;
    text-shadow: 1px 1px 1px #fff;
    font-size: 46px;
    display: block;
    position: relative;
    line-height: 100px;
    outline:none;
    -webkit-transition:  color 0.2s ease-in-out;
    -moz-transition:  color 0.2s ease-in-out;
    -o-transition:  color 0.2s ease-in-out;
    -ms-transition:  color 0.2s ease-in-out;
    transition:  color 0.2s ease-in-out;
}
.st-accordion ul li > a:hover{
    color: #1693eb;
}

含有箭头的span将被绝对定位,我们将其隐藏在链接元素之外,并给予它的不透明度为0。过渡效果是箭头从右边滑入并且淡入。


.st-accordion ul li > a span{
    background: transparent url(../images/down.png) no-repeat center center;
    text-indent:-9000px;
    width: 26px;
    height: 14px;
    position: absolute;
    top: 50%;
    right: -26px;
    margin-top: -7px;
    opacity:0;
    -webkit-transition:  all 0.2s ease-in-out;
    -moz-transition:  all 0.2s ease-in-out;
    -o-transition:  all 0.2s ease-in-out;
    -ms-transition:  all 0.2s ease-in-out;
    transition:  all 0.2s ease-in-out;
}
.st-accordion ul li > a:hover span{
    opacity:1;
    right: 10px;
}

当打开一个列表项时,我们将给它添加一个st-open的class,并且保留鼠标悬停时的颜色,span将被旋转并且箭头向上停留在眼前。


.st-accordion ul li.st-open > a{
    color: #1693eb;
}
.st-accordion ul li.st-open > a span{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    transform:rotate(180deg);
    right:10px;
    opacity:1;
}

接下来定义内容及其元素的样式:


.st-content{
    padding: 5px 0px 30px 0px;
}
.st-content p{
    font-size:  16px;
    font-family:  Georgia, serif;
    font-style: italic;
    line-height:  28px;
    padding: 0px 4px 15px 4px; 
}
.st-content img{
    width:125px;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
}

使用媒体查询来确保该项目的标题字体大小会小一些:


@media screen and (max-width: 320px){
    .st-accordion ul li > a{
        font-size:36px;
    }
}

这就是所有的样式!让我们继续看JavaScript。

JavaScript

让我们来看看这个插件的最重要的部分。首先我们从默认选项开始:


$.Accordion.defaults        = {
    // index of opened item. -1 means all are closed by default.
    open            : -1,
    // if set to true, only one item can be opened. 
    // Once one item is opened, any other that is 
    // opened will be closed first
    oneOpenedItem   : false,
    // speed of the open / close item animation
    speed           : 600,
    // easing of the open / close item animation
    easing          : 'easeInOutExpo',
    // speed of the scroll to action animation
    scrollSpeed     : 900,
    // easing of the scroll to action animation
    scrollEasing    : 'easeInOutExpo'
};

通过调用init函数初始化插件:


_init               : function( options ) {
         
        this.options        = $.extend( true, {}, $.Accordion.defaults, options );
         
        // validate options
        this._validate();
         
        // current is the index of the opened item
        this.current        = this.options.open;
         
        // hide the contents so we can fade it in afterwards
        this.$items.find('div.st-content').hide();
         
        // save original height and top of each item    
        this._saveDimValues();
         
        // if we want a default opened item...
        if( this.current != -1 )
            this._toggleItem( this.$items.eq( this.current ) );
         
        // initialize the events
        this._initEvents();
         
    },

_saveDimValues函数保存原始高度和项目顶部位置信息,以至于当打开一个项目时
我们知道该从哪里开始滚动。

如果我们已经设置了在默认情况下打开一个项目,我们将调用_toggleItem。

然后,我们初始化事件。

当点击一个项目,_toggleItem函数需要考虑到两种情况,要么我们有项目已经打开,例如它具有st-open的class,要么它就是关闭的。如果它是打开的,我们将它的项目高度到原始高度设置为从当前到-1,并且内容淡出。如果点击的项目是关闭的,我们可以设定该项目的索引是当前的,并且动画高度以适应内容且内容淡入。然后我们通过调用_scroll函数来滚动窗口以使点击的项目停留在顶部:


_toggleItem         : function( $item ) {
     
    var $content = $item.find('div.st-content');
     
    ( $item.hasClass( 'st-open' ) ) 
             
        ? ( this.current = -1, $content.stop(true, true).fadeOut( this.options.speed ), $item.removeClass( 'st-open' ).stop().animate({
            height  : $item.data( 'originalHeight' )
        }, this.options.speed, this.options.easing ) )
         
        : ( this.current = $item.index(), $content.stop(true, true).fadeIn( this.options.speed ), $item.addClass( 'st-open' ).stop().animate({
            height  : $item.data( 'originalHeight' ) + $content.outerHeight( true )
        }, this.options.speed, this.options.easing ), this._scroll( this ) )
 
},

在_initEvents函数中我们初始化了两个事件:点击一个项目和窗口尺寸调整。当我们点击一个项目,要么打开要么关闭调用_toggleItem函数,如果将oneOpenedItem参数设为真,那在打开当前项前首先关闭所有其他选项。

当窗口尺寸被调整,我们需要重设原始项目的值以及内容的高度,我们也想再次滚动项目到顶部。


_initEvents         : function() {
     
    var instance    = this;
     
    // open / close item
    this.$items.find('a:first').bind('click.accordion', function( event ) {
         
        var $item           = $(this).parent();
         
        // close any opened item if oneOpenedItem is true
        if( instance.options.oneOpenedItem && instance._isOpened() && instance.current!== $item.index() ) {
             
            instance._toggleItem( instance.$items.eq( instance.current ) );
         
        }
         
        // open / close item
        instance._toggleItem( $item );
         
        return false;
     
    });
     
    $(window).bind('smartresize.accordion', function( event ) {
         
        // reset original item values
        instance._saveDimValues();
     
        // reset the content's height of any item that is currently opened
        instance.$el.find('li.st-open').each( function() {
             
            var $this   = $(this);
            $this.css( 'height', $this.data( 'originalHeight' ) + $this.find('div.st-content').outerHeight( true ) );
         
        });
         
        // scroll to current
        if( instance._isOpened() )
        instance._scroll();
         
    });
     
},

这些是关于这个手风琴插件最重要的函数。

希望你喜欢这个简单的插件,并发现它很有用!

原创译文 转载请注明出处
英文原文:FLEXIBLE SLIDE-TO-TOP ACCORDION