Question

我最近开始尝试将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;

  }

有人可以帮忙，因为我很困惑如何使用提供的文件？

非常感谢帮助，谢谢。

Answer 1

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

$('#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>

如何自定义JCoverFlip的大小？

1 个答案: