我工作的翻转图像，但它不工作

-6

script type="text/javascript"> </script> 
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="/path/to/jquery.flip.min.js"></script> 
    <script> 
     $(function() { 
      $(".flip").flip({ 
       trigger: 'hover' 
      }); 
     }); 
    </script> 
    <scrip> 
     $(function() { 
      $(".flip").flip({ 
       trigger: 'hover', 
       axis: 'x' 
      }); 
     }); 
    </script> 

    <style> 
     .flip 
     { 
      height: 199px; 
      width: 300px; 
      margin: 0 auto; 
     } 
     .flip img 
     { 
      width: 300px; 
      height: auto; 
     } 
     .flip .back 
     { 
      background: #2184cd; 
      color: #fff; 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div class="flip"> 
     <div class="front"> 
      <img src="images/pic/70.jpg" alt="" /> 
     </div> 
     <div class="back"> 
      <h3> 
       Some Text in the Back!</h3> 
     </div> 
    </div> 
    </form>

我已经写了下面它的代码，但是代码没有工作，那么显示的图像和文字下面我wantit是翻盖注：我应该怎么做，如果我希望正面和背景仅作为图像而不是文本[这是上面代码的结果]我想要的是当我将鼠标悬停在图像上时，它将翻转并显示文本。注意如果我需要不同的图像，我应该怎么做旁边！我工作的翻转图像，但它不工作

来源

2016-12-28 andy

你有没有检查你的浏览器控制台的错误？ – NewToJS

脚本标记错误：'' – hackerrdave

C＃在哪里？ –

我认为这是你的完美答案。

.flip 
 
     { 
 
      height: 199px; 
 
      width: 300px; 
 
      margin: 0 auto; 
 
     } 
 
     .flip img 
 
     { 
 
      width: 300px; 
 
      height: auto; 
 
     } 
 
     .flip .back 
 
     { 
 
      background: #2184cd; 
 
      color: #fff; 
 
      text-align: center; 
 
     }

<head> 
 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.1.2/jquery.flip.min.js"></script> 
 
<script> 
 
    $(function() { 
 
    $(".flip").flip({ 
 
     trigger: 'hover' 
 
    }); 
 
    }); 
 
</script> 
 
<script> 
 
    $(function() { 
 
    $(".flip").flip({ 
 
     trigger: 'hover', 
 
     axis: 'y' 
 
    }); 
 
    }); 
 
</script> 
 
</head> 
 
<body> 
 
    <form id="form1" runat="server"> 
 
    <div class="flip"> 
 
     <div class="front"> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/originals/b8/d6/02/b8d60211137a9b9aca275adeb594d0c7.jpg" alt="" /> 
 
     </div> 
 
     <div class="back"> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/originals/b8/d6/02/b8d60211137a9b9aca275adeb594d0c7.jpg" alt="" /> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body>

来源

2016-12-28 04:54:49 Hit

应该怎样我做如果我想horizonatl菲尔普？这是垂直filp可以ü请告诉我horizonatl翻转?????? https：//www.ostraining.com/images/coding/jquery-flip/demo/检查这个网站，并观看第一个演示，我想那样请回复 – andy

现在这是水平翻转，请参阅上面的回答 – Hit

谢谢，但我已完成滑块上的动态图像，但在滑块有很多图像，我只想要一个或两个图像应该一次翻转我该怎么办我应该应用哪种CSS？ @请登录 – andy

我只是试图在拨弄纯CSS和HTML。请看看

go through this beside link http://jsfiddle.net/cjaLhdjo

来源

2016-12-28 05:39:10

我工作的翻转图像，但它不工作

回答

相关问题