10

我正在做一个网站设计，我需要一种方法在 body 标签的背景图像完全加载完成时淡入淡出（也许然后暂停 500 毫秒）。

如果您看到August的网站设计，您会看到背景淡入；但是，这是使用 Flash 背景完成的。有没有办法用 jQuery 或 JavaScript 做到这一点？

2010 年 9 月 19 日更新：

所以对于那些来自谷歌的人（这是目前“加载背景淡入淡出”的第一结果，我只是想我会为每个人做一个更清晰的实现示例。

在页脚的某处添加 a<div id="backgroundfade"></div>到您的代码（如果您不希望 DOM 变得混乱，也可以通过 JavaScript 附加它。

这样的风格——

#backgroundfade {
  position: fixed;
  background: #FFF /* whatever color your background is */
  width: 100%;
  height: 100%;
  z-index: -2;
}

然后将其添加到您的 JavaScript 脚本文件（需要 jQuery）：

$(document).ready(function() {
    $('#backgroundfade').fadeOut(1000);
});

这具有#backgroundfade在 DOM 完成后 1 秒内淡出元素（“覆盖”实际背景的框）的效果。

4

6 回答 6

4

是的：

不要给身体背景图像。然后准备一个带有渐变效果的动画 GIF。在 Javascript 中：

document.onload = function () {
  window.setTimeout (function () {
    document.getElementsByTagName ("body")[0].style.backgroundImage = "url(/path/to/image.gif)";
  }, 500);
};

在 jQuery 中它会是

$(function () {
  $('body').css ('backgroundImage', 'url(/path/...)');
});

如果您不想使用动画 GIF 技巧，但需要对 JPEG 或 PNG 的支持，那就太糟糕了。您必须创建一个占位符<div/>，将其定位到正确的位置并使用不透明度。您还必须检测背景图像何时加载，以免在慢速连接时出现愚蠢的跳跃。一个不工作的例子：

var x = new Image();
x.onload = function () {
  /*
    create div here and set it's background image to
    the same value as 'src' in the next line.
    Then, set div.style.opacity = 0; (best, when the
    div is created) and let it fade in (with jQuery
    or window.setInterval).
  */ };
x.src = "/path/to/img.jpg";

干杯，

于 2009-06-28T18:22:34.483 回答
2

我自己没有这样做，但它可能会起作用。

我猜你可以设置背景图像，然后用一个黑色背景的大旧 div 遮盖它。然后使用这个 div 的不透明度来创建淡入淡出效果。这个黑色的div必须覆盖整个身体。

于 2009-06-28T18:34:11.407 回答
2

我不确定是否有办法让背景图像淡入，但你可以做到的一种方法是使用具有负 z-index 的绝对定位图像。然后，您可以使用 jquery 淡入图像。如果您需要平铺或重复背景图像，这种方法可能会比较棘手。

的HTML：

<body style="z-index: -2">
<img src="backgroundImage.jpg" id="backgroundImage" style="position: absolute; top: 0px; left: 0px; z-index: -1; display: none;">
<!-- The rest of your HTML here -->
</body>

jQuery：

$(window).load(function() {

    $("#backgroundImage").fadeIn("slow");
});
于 2009-06-28T18:35:22.560 回答
2

我看到这个链接，

http://fragged.org/dev/changeing-and-fading-body-background-image.php

这个想法是：

将您的背景应用于分配了低 z-index、绝对定位和背景的 div（将其视为反向/后退模式）。然后将您的内容生成到具有透明背景的另一层之上....

您现在可以通过 id 引用底层并更改不透明度。

它所需要的只是一个背景法师的堆栈/数组作为属性应用到图层......

于 2009-06-28T18:36:44.727 回答
0

为什么不使用现成的脚本：这个脚本使背景图像在页面加载时淡入。

它还使图像适合窗口的尺寸，但如果不需要，可以禁用它。

于 2010-07-08T00:21:33.770 回答
-1

我的解决方案：

HTML：

<img id='myImg' />

CSS：

#myImg{
    opacity: 0;              
    -moz-opacity: 0;         
    -khtml-opacity: 0;       
    filter: alpha(opacity=0); 
}

JS：

var img = document.getElementById('myImg'),
    steps = 30,
    appearTime = 1000;

img.src = "/path/to/img.gif";

img.onload = function(){
    for(i=0; i<=1; i+=(1/steps)){
        setTimeout((function(x){
            return function(){
                img.style.opacity = x;
                img.style.MozOpacity = x;
                img.style.KhtmlOpacity = x;
                img.style.filter = "alpha(opacity=" + (x*100) + ")";                    
            };
        })(i), i*appearTime);

    };
};
于 2010-11-08T12:20:11.427 回答