Question

我正在尝试为div中的背景图像添加一个id，以便在加载时淡入淡出。

 <div class="thumbnail" style="background-image:url(images/bracelets/1/002.png,); width:356px; height:265px;"><a id="thumbnail-btn" href="images/bracelets/1/002a.png" rel="lightbox" title="my caption"></a></div>

这就是我在代码中的内容以及我想要添加id的内容是：

background-image:url(images/bracelets/1/002.png,)

我在页面上有几个背景图像，我想同时淡入。任何人都可以帮助我或告诉我是否可以添加ID。因为这是我想用来淡入的代码。

document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");

var images = [ "thephoto1", "thephoto2", "thephoto3" ];
function initImages() {
    for (var i = 0; i < images.length; i++) {
        imageId = images[i];
        image = document.getElementById(imageId);
        setOpacity(image, 0);
        image.style.visibility = "visible";
        fadeIn(imageId, 0);
    }
}
function fadeIn(objId,opacity) {
    if (document.getElementById) {
        obj = document.getElementById(objId);
        if (opacity <= 100) {
            setOpacity(obj, opacity);
            opacity += 10;
            window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
        }
    }
}
function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
// -->
</script>

如果有人对如何做到这一点有更好的了解，我会非常感激！

谢谢！ S上。

Answer 1

您应该考虑使用jQuery来设置不透明度。它会为您解决所有跨浏览器兼容性问题... jQuery中还有一个淡入淡出功能，因此您只需将其应用于页面上所有“缩略图”类别的DIV即可。

示例可能如下：

<script type="text/javascript">
$(document).ready(function(){
  $("div.thumbnail").fadeIn("slow",function(){
    // do something when the items have faded in
  });
});
</script>

Answer 2

你不能在bg图像上放置id。你用它的bg的东西的ID来引用它。如果你想做这个工作，它需要一些聪明的布局。让divs彼此叠加，这样你就可以让顶部清晰，底部则可以褪色。是的，因为farligOpptreden说，使用jquery。会让你的生活更轻松。

将ID添加到div内的背景图像

2 个答案: