我工作的翻轉圖像，但它不工作

-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

我工作的翻轉圖像，但它不工作

回答

相關問題