0

我使用 jQuery 创建了图像幻灯片。图像在彼此之间褪色。每个图像都有标题，每个图像都在自己的 div 中。随着图像在相关标题中的淡化向上滑动。标题是透明的，这适用于除 IE 之外的所有浏览器（我已经测试过）。

该网站可在http://mtsoc.enfotext.com找到

javascript（用于其中一张幻灯片）是：

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

我发现如果我隐藏了一个具有透明 css 规则的类的元素，当我再次显示该元素时，我必须（当然仅限于 IE）重新建立过滤 css 规则。

这对我有用：

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

IE 没有实现 filter CSS 属性。您将需要使用类似 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); IE的透明度。或者，您可以使用 PNG 背景图像并使用 JS 应用透明度。那里有很多选择。

于 2009-07-04T15:13:50.020 回答
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 回答