0

我必须在我的项目中翻转一个图像，并且我使用一个函数结合 css 来实现它。当它被翻转时，当它再次翻转时，它会显示另一个 div，当然，它会返回到原始 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 回答