javascript - HTML/CSS/Javascript翻转图像功能不起作用

我必须在项目中翻转图像，并使用与CSS结合使用的功能来实现该图像。翻转时，当再次翻转回原始div时，它将显示另一个div en。但是当我单击时，什么也没有发生。所以仍然有问题，但不知道是什么。

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>

招呼

最佳答案

我想您已经添加了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。

希望它能工作。

关于javascript - HTML/CSS/Javascript翻转图像功能不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18693584/