0

わかりました、ビデオを中央に配置しました。これは、目の開閉のループを示しています。その背後には、目を閉じるGIFを含む隠しdivがあります。私がアーカイブしたいのは、ユーザーがボタンをホバーすると、ビデオの上に GIF が表示されることです。これは私がこれまでに持っているものです:

jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    <script language="text/javascript">
        var image = new Image();
        image.src = "eye.gif";
        $("#apDiv1").hover(function () {

          $("#gif").show().attr('src', image.src);
        }, function(){
            $("#gif").hide();
        });
      </script>

HTML ボタン:

<div id="apDiv1">
                                <li>
                                    <a href="../designcompany/index.html">
                                    <span class="ca-icon">Mode</span>
                                    </a>                    
                                </li>
                            </div>

HTML ムービーと GIF:

<div id="w">


    <img id="gif" src="eye.gif"/>
                                    <div id="videoplayer">
                                        <center>
                                            <video id="intro" autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted" width="1024" height="400" >
                                            <source src="./media/eye.mp4" type="video/mp4">
                                            </video>
                                        </center>   
                                    </div>
                            </div>

CSS:

#gif{
 display:none;   
}
4

3 に答える 3

0

別の要素の「上に」要素が必要な場合は、その z-index をより大きな数値に設定する必要があります。

于 2013-03-21T22:15:17.087 に答える
0

私がアーカイブしたいのは、ユーザーがボタンをホバーすると、ビデオの上にGIFが表示されることです 

 $("#apDiv1").hover(
          function () {
           $("#gif").show().attr('src', image.src);
           $('#gif').css('z-index','999999');
           $('#videoplayer').css('z-index','999');
          },

          function(){
           $("#gif").hide();
        });
于 2013-03-21T22:18:30.680 に答える
0 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    <script language="text/javascript">
        //your code is here
    </script>
</script>

最初のスクリプト タグを閉じる必要があります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
       //your code now goes here
    });
</script>

そして、言語属性は 1990 年代に人気があったと思います (センタータグが消えたのとほぼ同じ時期です) ?

次に、要素を正しい順序で配置します。

<div id="apDiv1">
    <div id="videoplayer" style="margin: 0 auto; position: relative;">
        <video id="intro" autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted" width="1024" height="400">
            <source src="./media/eye.mp4" type="video/mp4" />
        </video>
        <img id="gif" src="eye.gif" style="display: none; position: absolute; top:0; left:0;"/>
    </div>
</div>

そして、画像を非表示にして表示します。

$("#apDiv1").on('mouseenter mouseleave', function(e) {
    $("#gif").toggle(e.type==='mouseenter')
});
于 2013-03-21T22:19:29.240 に答える