私はフリップ画像に取り組んでいますが、それは私がそれのために以下のコードを書いていますが、コードは、私はフリップ注意するwantitの下に、それは画像とテキストを表示する機能していない

-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 flip ?????? https：//www.ostraining.com/images/coding/jquery-flip/demo/このサイトをチェックして1回目のデモを見てください返信 – andy

これは水平フリップです。上記の回答を参照してください。 – Hit

ありがとう、しかし、私はスライダーのダイナミックイメージで済んでいますが、スライダーには多くのイメージがあります。私は1つまたは2つのイメージだけをフリップする必要があります。どのCSSを適用する必要がありますか？ @Hit – andy

私はただ純粋なCSSやHTMLとフィドルでそれを試してみました。どうぞご覧ください。

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

出典

2016-12-28 05:39:10

私はフリップ画像に取り組んでいますが、それは私がそれのために以下のコードを書いていますが、コードは、私はフリップ 注意するwantitの下に、それは画像とテキストを表示する機能していない

答えて

関連する問題

私はフリップ画像に取り組んでいますが、それは私がそれのために以下のコードを書いていますが、コードは、私はフリップ注意するwantitの下に、それは画像とテキストを表示する機能していない