0

プロジェクトで画像を反転する必要があり、css と組み合わせて関数を使用してそれを実装しています。反転すると、別の div en が表示され、再び反転すると元の div に戻ります。しかし、クリックしても何も起こりません。何かがまだ間違っていますが、何がわかりません。

Javascript:

<script type="text/javascript">
  $(document).ready(function () {
      /* The following code is executed once the DOM is loaded */

      $('.sponsorFlip').bind("click", function () {

          // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

          var elem = $(this);

          // data('flipped') is a flag we set when we flip the element:

          if (elem.data('flipped')) {
              // If the element has already been flipped, use the revertFlip method
              // defined by the plug-in to revert to the default state automatically:

              elem.revertFlip();

              // Unsetting the flag:
              elem.data('flipped', false);
          }
          else {
              // Using the flip method defined by the plugin:

              elem.flip({
                  direction: 'lr',
                  speed: 350,
                  onBefore: function () {
                      // Insert the contents of the .sponsorData div (hidden from view with display:none)
                      // into the clicked .sponsorFlip div before the flipping animation starts:

                      elem.html(elem.siblings('.sponsorData').html());
                  }
              });

              // Setting the flag:
              elem.data('flipped', true);
          }
      });

  });

HTML:

<div class="sponsorListHolder">
            <div class="sponsor" title="Click to flip">
                <div class="sponsorFlip" >
                    <img src="Images/edan.png" alt="More about Edan" id="test" />
                </div>
                <div class="sponsorData">
                    <div class="sponsorDescription">
                        Edan
                    </div>
                    <div class="sponsorURL">
                        <!--                    <a href="#">Edan</a>-->
                    </div>
                </div>
            </div>

CSS:

.sponsorListHolder{
margin-bottom:30px;
}

.sponsor{
width:180px;
height:180px;
float:left;
margin:4px;

/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}

.sponsorFlip{
/*  The sponsor div will be positioned absolutely with respect
    to its parent .sponsor div and fill it in entirely */

position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;  

}

.sponsorFlip:hover{
border:1px solid #999;

/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}

.sponsorFlip img{
/* Centering the logo image in the middle of the sponsorFlip div */

position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
}

.sponsorData{
/* Hiding the .sponsorData div */
display:none;
}

.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}

.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}

jquery プラグインを含めました。

<script type="text/javascript" src="js/jquery.flip.min.js"></script>

あいさつ

4

1 に答える 1

0

Jquery を追加したと思いますが、 Jquery UIを追加することもできます。 

<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>

前

<script type="text/javascript" src="js/jquery.flip.min.js"></script>

http://lab.smashup.it/flip/右側には、このプラグインが Jquery および Jquery UI に依存することが記載されています。

それがうまくいくことを願っています。

于 2013-09-09T08:36:47.207 に答える