javascript - 如何自定义JCoverFlip的大小？

我最近开始尝试在我的网站中实现JCoverflip，目前我在此链接Current Implementation上显示了什么

但是，我希望能够自定义封面的尺寸，以便可以使用屏幕截图代替这些较小的封面。我在他们的网站上提供了一些自定义文档：Customization Options，但是我不知道如何使用它或设置图像和容器大小的样式。

提供和使用的当前CSS样式如下：

      .ui-jcoverflip {
    position: relative;
  }

  .ui-jcoverflip--item {
    position: absolute;
    display: block;
  }

  /* Basic sample CSS */
  #flip {
    height: 200px;
    width: 630px;
    margin-bottom: 50px;
  }

  #flip .ui-jcoverflip--title {
    position: absolute;
    bottom: -30px;
    width: 100%;
    text-align: center;
    color: #555;
  }

  #flip img {
    display: block;
    border: 0;
    outline: none;
  }

  #flip a {
    outline: none;
  }


  #coverflowwrapper {
    height: 300px;
    width: 630px;
    overflow: hidden;
    position: relative;
    margin:0 auto;
  }

  .ui-jcoverflip--item {
    cursor: pointer;
  }

   #scrollbar {
    position: absolute;
    left: 20px;
    right: 20px;
    display:block;

  }

当我对如何使用提供的文档感到困惑时，可以请人帮忙吗？

帮助将不胜感激，谢谢。

最佳答案

您可以使用jCoverflip中的beforeCss, afterCss and currentCss覆盖默认值来更改图像大小和间距。这是我的代码（请注意width和height属性）：

$('#flip').jcoverflip({
        time: 300, // fade time
        beforeCss: function( el, container, offset ){
            return [
                $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 280 - 190 *offset )+'px', bottom: '20px' }, { } ),
                $.jcoverflip.animationElement( el.find( 'img' ), { opacity: 0.7, width: '150px', height: '84px' }, {} )
            ];
        },
        afterCss: function( el, container, offset ){
            return [
                $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 180 + 190 *offset )+'px', bottom: '20px' }, { } ),
                $.jcoverflip.animationElement( el.find( 'img' ), { opacity: 0.7, width: '150px', height: '84' }, {} )
            ];
        },
        currentCss: function( el, container ){
            return [
                $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: '-10px' }, { } ),
                $.jcoverflip.animationElement( el.find( 'img' ), { opacity: 1.0, width: '250px', height: '141px' }, { } )

            ];
        }
    });

这是我的html：

        <div id="flip">
            <div class="flip_item">
                <img src="img/1.jpg" />
                <p class="caption">Product 3</p>
                <div class="info">
                    <div class="descr">Vius, quacins id urna et augue facilisis dictum. </div>
                </div>
            </div>
            <div class="flip_item">
                <img src="img/2.jpg" />
                <p class="caption">Product 5</p>
                <div class="info">
                    <div class="descr">Nullad urna et augue facilisis dictum. </div>
                </div>
            </div>
        </div>