Question

我正在尝试这样做，以便当您单击页面顶部的导航按钮时，它们会导致背景发生变化。我部分成功，但背景总是立即切换回来，我希望每个背景都淡入下一个背景。这是第一页上带有html的javascript：

<script type="text/javascript">
$('li a').click(function(e){
     e.preventDefault();
     $.cookie('currentImg', $('body').css('background-image') );
     $.cookie('nextImg', 'Tranquil.jpg');
});
</script>

<li class="item6" onmouseover="style.backgroundColor='#022D4D';" onmouseout="style.backgroundColor='#032F76';"><a href="Environment.php" onClick="EnvBack();" title="Environment" >Environment</a></li>

这是新页面上的javascript：

<script type="text/javascript">
//on next page (Environment.php)

//#nextImage is a div covering the page with a z-index placing just above the body element
$('body').css('background-image', $.cookie('currentImg') );
$('#nextImage').css({
      visibility : 'hidden',
      backgroundImage : $.cookie('nextImg')
  //wait for image to load
}).load(function(){
     //set state to hidden, if it was hidden before rather than merely 
     //invisible the div will not load.
     //then fade in the new image producing a smooth transition
     $(this).css('visibility','visible').fadeIn(function(){
           //reset state of page
           $('body').css('background-image', $.cookie('nextImg') );
           $(this).remove();
     });
});
</script>

这是身体的CSS：

body
{
    background-image:url("abstract1.jpg");
    background-repeat: no-repeat;
    background-size:100%;
    background-attachment:fixed;
    font-family:font-family: Helvetica,Arial, sans-serif;
    text-align:center;
    width: 100%;
    height: 100%;
}
#nextImage
{
    background-image="";
    background-repeat: no-repeat;
    background-size:100%;
    background-attachment:fixed;
    font-family:font-family: Helvetica,Arial, sans-serif;
    text-align:center;
    width: 100%;
    height: 100%;
    z-index:1;
}

当我跳转到新页面时...所有css都是不可见的而不是转换

Answer 1

如果你通过jQuery更改背景，请记住JS在客户端运行。

基本上，似乎背景会发生变化，但只要执行默认的"onclick"操作就会返回。

这是因为重定向链接只会让您在另一个JS会话中跳转到另一个页面。

您可以使用Cookie（jQuery插件HERE）解决此问题，因此每次更改页面时，您都会读取背景网址的值，然后选择下一个。

Answer 2

另一个更新!!! 我不知道它是否有助于实现您的目标，但不是试图让您的大脑过渡图像而不是使用简单的直色，而是使用 GREAT 渐变工具here来设置您的类，以使用跨浏览器兼容的渐变过渡！虽然谨慎，我通过测试发现，并非所有渐变过渡都很好。


更新 jsFiddle 用于显示通过jQueryUI的.toggleClass更改正文背景颜色的工作示例，仍然不知道如果它适用于图像

另外请注意，尝试将jQueryUI添加到您的jQuery中，然后查看以下两个文档页面：

要获得您真正需要的所有信息并理解，切换类是jQuery核心的一部分，但动画转换是使用jQuery ui添加的，因此仅适用于某种程度的操作。例如，我没有测试你想要通过 body 背景更改来实现的目标，所以我不能肯定这是你的解决方案，但我确实知道更改元素背景很简单。

要进行简单的元素背景更改，请执行以下操作：

示例HTML我正在使用

<div id="eleID" class="original"> some text </div>
<button id="btnChange">Change</button>

您需要建立一个original类，其中包含您的基本背景和颜色设置＆amp;包含change背景颜色和文字颜色的alternate类的某些类型，如下所示：

.original{
    background-color: #fff;
    color: #000;
}
.change {
    background-color: #000;
    color: #fff;
}

最后，你的简单javascript将是：

$(function() {
    $("#btnChange").click(function(e) {
        $("#eleID").toggleClass( "change", 1000 );
    });
});

Answer 3

非常尊重VAShhh用于捕捉此等式的刷新部分。

首先，您需要通过cookie将当前图像设置传输到新页面，刷新后图像可以保留。在这个例子中，我将传输当前和所需的图像。（需要jquery cookie插件）

//its important to use jQuery here so we have a normalized event object
$('li a').click(function(e){
     e.preventDefault();
     $.cookie('currentImg', $('body').css('background-image') );
     $.cookie('nextImg', 'Tranquil.jpg');
});

//on next page (Environment.php)

//#nextImage is a div covering the page with a z-index placing just above the body element
$('body').css('background-image', $.cookie('currentImg') );
$('#nextImage').css({
      visibility : 'hidden',
      backgroundImage : $.cookie('nextImg')
  //wait for image to load
}).load(function(){
     //set state to hidden, if it was hidden before rather than merely 
     //invisible the div will not load.
     //then fade in the new image producing a smooth transition
     $(this).hide().css('visibility','visible').fadeIn(function(){
           //reset state of page
           $('body').css('background-image', $.cookie('nextImg') );
           $(this).remove();
     });
});

您不能在同一元素上的css背景图像之间交叉淡入淡出。要达到你想要的效果，你需要两个元素。一个用于保存初始图像，另一个用于保存新图像。将新的一个放在旧的（z-index）上，然后用新图像淡化元素。

你可能想要查看一个jQuery插件，如： http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html http://buildinternet.com/project/supersized/ http://tobia.github.com/CrossSlide/

请记住，您还必须在淡入淡出之前预先加载下一张图像，否则它会显得很糟糕。

以下是我自己写的一个例子：

http://www.wideopenadventure.com/woa/

如何在不同的身体背景之间转换？（尝试2）

3 个答案:

如何在不同的身体背景之间转换？ （尝试2）

3 个答案:

如何在不同的身体背景之间转换？（尝试2）