0

jQueryを使用して画像のスライドショーを作成しました。画像は互いにフェードします。各画像には、それぞれ独自の div 内にキャプションがあります。画像がフェードインすると、関連するキャプションが上にスライドします。キャプションは透過的であることを意図しており、これは IE を除くすべてのブラウザー (私がテストしたもの) で機能します。

Web サイトはhttp://mtsoc.enfotext.comにあります。

JavaScript（スライドショーの1つ）は次のとおりです。

function slideShow() {

    //Set the opacity of all images to 0
    $('#mainfeature a').css({
        opacity: 0.0
    });

    //Get the first image and display it (set it to full opacity)
    $('#mainfeature a:first').css({
        opacity: 1.0
    });

    //Set the caption background to semi-transparent
    $('#mainfeature .caption').css({
        opacity: 0.7
    });

    //Call the gallery function to run the slideshow
    setInterval('main_gallery()', 8000);
}


function main_gallery() {

    //if no IMGs have the show class, grab the first image
    var current = ($('#mainfeature a.show') ? $('#mainfeature a.show') : $('#mainfeature a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#mainfeature a:first') : current.next()) : $('#mainfeature a:first'));

    //Set the fade in effect for the next image, show class has higher z-index
    next.css({
        opacity: 0.0
    })
        .addClass('show')
        .animate({
        opacity: 1.0
    }, 1000);

    //Hide the current image
    current.animate({
        opacity: 0.0
    }, 1000)
        .removeClass('show');

    //Set the opacity to 0 and height to 1px
    $('#mainfeature .caption').animate({
        opacity: 0.0
    }, {
        queue: false,
        duration: 0
    }).animate({
        height: '1px'
    }, {
        queue: true,
        duration: 300
    });

    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    $('#mainfeature .caption').animate({
        opacity: 0.7
    }, 100).animate({
        height: '50px'
    }, 500);
}

CSSは次のとおりです。

#mainfeature.feature {
    color: #fff;
    display: block;
    position: absolute;
    overflow: hidden;
    z-index: 1;
}

#mainfeature.caption {
    background: #333;
    padding: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 600;
    height: 50px;
    opacity: 0.7;
    filter: alpha(opacity = 70);
    width: 575px;
}

HTML は次のとおりです。

<div id="mainfeature">
    <a href="#" class="show feature">
        <img src="<?php bloginfo('template_directory'); ?>/images/12.jpg" />
        <div class="caption">
            <span class="tag">Spring Show</span>
            <span class="title">A Funny Thing Happened on the Way to the Forum</span>
            <span class="detail">Through June 15</span>
        </div>
    </a>
... more slides...
</div>

とにかく、長い質問、たくさんの情報。IE でキャプションが透明でない理由を知っている人はいますか?

ありがとう

4

4 に答える 4

0

問題は、ネストされた不透明度設定にあるようです。

開発ツールバーでdomを参照する場合は、を削除することで適切な外観を実現できます。 

filter:alpha(opacity=100)

a.featureタグから（アンカーが表示されている間に実行する必要があります）。

できることがいくつかあります。アンカー全体をフェードインおよびフェードアウトする必要がある場合は、下部に線を追加して不透明度のスタイルを削除できます。

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000, null, function(){ next.removeAttr("style"); });

また、fadeIn / fadeOut関数は、範囲全体に不透明度を適切に適用するように設計されているため、使用を検討することをお勧めします。

于 2009-07-04T15:35:32.910 に答える
0

jQuery で不透明度を設定する適切なクロス ブラウザーの方法は、.fadeIn/.fadeOut/.fadeTo を使用することです。

これらはアニメーション化された不透明度設定を目的としていることは理解していますが、要件に合わせてタイミングを変更できます。記載されている他の回答はより堅牢ですが、もう少しメンテナンスが必要です。

それが役立つことを願っています。

于 2009-07-04T15:47:47.253 に答える
0

IE は filter CSS プロパティを実装していません。filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); のようなものを使用する必要があります。IE の透過性のために。または、PNG 背景画像を使用し、JS を使用して透明度を適用することもできます。そこにはたくさんのオプションがあります。

于 2009-07-04T15:13:50.020 に答える
0

透明度 css ルールを持つクラスを持つ要素を非表示にした場合、要素を再度表示したときに (もちろん IE のみ) フィルター css ルールを再確立する必要があることがわかりました。

これは私のために働いた：

$(".selected").find(".overlay").css("filter", "alpha(opacity=80)").fadeIn(500);
于 2009-11-25T00:45:15.717 に答える