0

img.icon_zoom（4行目）をマウスオーバーでのみ表示したいと思います。この画像は私が得たい効果になります。したがって、クライアントがマウスでホバリングすると、アイコンはゆっくりとフェードインします。後ろの写真は、クリックするとドロップボックスを開くリンクで、class="piczoom"を介してリンクされています。どうすればいいですか？！？！

ここに画像の説明を入力してください

これは私の実際のコードです。最初の4行の興味深い部分：

<div id="tab1">
                    <div class="usual">
                        <a class="piczoom" href="_img/prensa/DOC2.jpg"><img alt="" src="./_img/prensa/photo_zoom.jpg"  class="photo_zoom" /></a>
                        <img class="icon_zoom" src="_img/prensa/icon.zoom.png" alt="zoom" />
                    </div>

                    <article>
                        <p class="p_title1"><img src="./_img/prensa/medio.png" alt="" /></p>
                        <img class="under1" src="./_img/prensa/underline.png" alt="" />
                        <p class="p_text">Revista la Moraleja</p>
                        <br>
                        <br>
                        <p class="p_title2"><img src="./_img/prensa/description.png" alt="" /></p>
                        <img class="under2" src="./_img/prensa/underline.png" alt="" />
                        <p class="desc_txt" class="p_text">Entrevista realizada por Antonio Corales. Visitaron el estudio mientras se realizaba los preparativos previos a la exposicion de Santander. Esta entrevista fue publicado en las tres primera paginas de la revista. hola
                        </p>
                        <br>
                        <div class="quote_box">
                            <img class="quote_left" src="./_img/prensa/quote.left.png" alt="" />
                            <p class="quote">Sus colores y textura te imnotizanaran</p>
                            <img class="quote_right" src="./_img/prensa/quote.right.png" alt="" />
                        </div>
                    </article>
                </div>

それは最終的な学校のプロジェクトのためですので、私はそれをとても感謝しています！

4

2 に答える 2

2

スムーズにしたいので、おそらく画像をプリロードしたいので、cssに追加してください...

div#preloaded-images {
    position: absolute;
    overflow: hidden;
    left: -9999px; 
    top: -9999px;
    height: 1px;
    width: 1px;
}

HTMLの下部に...

<div id="preloaded-images">
    <img src="path/to/my-image.png" width="1" height="1" alt="" />
</div>

次に、jqueryを追加して画像をフェードインします...

$('#mydiv').hover(function () {
    $('#imageId').fadeIn('slow', function() {});
}, 
function () {
    $('#imageId').fadeOut('slow', function() {});
});
于 2012-08-15T19:29:32.430 に答える
1

最後に、私は私が得た答えで私の答えを見つけました。ありがとうございます...

コードを作成したので、ページをロードするとアイコンは非常にゆっくりとフェードインし、マウスをホバーするとフェードインとフェードアウトが機能するようになります。これが好奇心旺盛な人のための私のコードです、ありがとう!!!!

<script type="text/javascript">
        /*JQ Fancybox for zoom foto*/
        $(document).ready(function() {
            $("a.piczoom").fancybox({
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'
            });

            /*JQ to fade in on load*/
            $('.icon_zoom').hide().fadeIn(3000);

            /*JQ after load to work with hover*/
            $('.pic_zoom_box').hover(function () {
                $('.icon_zoom').fadeIn('slow', function() {});
            }, 
            function () {
                $('.icon_zoom').fadeOut('slow', function() {});
            });

        });
        </script>

<div class="pic_zoom_box" class="usual">
                            <a class="piczoom" href="_img/prensa/2_Cutted_zoom/diario_montanes/el_diario_Montanes.jpg">
                                <img alt="" src="_img/prensa/3_Cutted_preview/diario_montanes/el_diario_montanes.jpg"  class="photo_zoom" />
                                <img class="icon_zoom" src="_img/prensa/icon.zoom.png" alt="zoom" />
                            </a>
                        </div>
于 2012-08-16T16:18:48.043 に答える