Question

我最近开始试图将JCoverf片带入我的网站上,而我目前在这个链接上展示了什么。

但我想能够定制覆盖面积,以便我能够使用屏幕,而不是这些较小的覆盖面。我在网站上获得了一些定制文件:Customization Options,但我不知道如何使用这种或风格的图像和集装箱大小。

提供和使用的现行社会保障制度风格如下:

      .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中夸大,来改变形象大小和间隔。我的法典(注意到 w和高等特性):

$( #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  }, { } )

            ];
        }
    });

页: 1

        <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>

友情链接