如何在单击时在不同的body背景之间转换?(尝试2)

我正在尝试这样做，当您单击页面顶部的导航按钮时，它们会导致背景发生变化。我取得了部分成功，但背景总是立即切换回来，我希望每个背景都淡出到下一个背景中。以下是带有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都是不可见的，而不是转换

如果您通过jQuery更改后台，请记住JS在客户端运行。

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

之所以会发生这种情况，是因为重定向链接只会让您使用另一个JS会话跳转到另一个页面。

你可以使用cookie（jQuery插件HERE）来解决这个问题，所以每次你更改页面时，你都会读取背景url的值，然后选择下一个。

又一次更新我不知道这是否有助于实现你的最终目标，但你可以使用GREAT渐变工具将你的类设置为使用跨浏览器兼容的渐变过渡，而不是试图让你的大脑紧张地转换图像，也不是使用纯直色！尽管需要注意的是，我通过测试发现，并不是所有的梯度都能很好地转换。

UPDATE jsFiddle用于显示通过jQueryUI更改body背景颜色的工作示例。toggleClass，仍然不知道它是否适用于图像

另一个注意事项是，尝试将jQueryUI添加到jQuery中，然后查看以下两个文档页面：

http://jqueryui.com/demos/toggleClass/
http://docs.jquery.com/UI/Effects/ClassTransitions

为了获得你真正需要的所有信息并理解，toggle类是jQuery核心的一部分，但动画转换是用jQueryui添加的，因此只适用于一定程度的操作。例如，我还没有测试过您试图通过body背景更改来实现什么，所以我不能肯定这是您的解决方案，但我知道更改元素背景很简单。

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

示例HTML我正在使用

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

您需要建立一个CCD_ 2类，其中包含您的基本背景和颜色设置&某种类型的change类，包含alternate背景色和文本色，比如

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

最后，您的简单javascript是：

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

非常尊重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索引），并在中使用新图像淡化元素

你可能想看看jQuery插件，比如：http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.htmlhttp://buildinternet.com/project/supersized/http://tobia.github.com/CrossSlide/

请记住，在褪色之前，您还必须预加载行中的下一个图像，否则它看起来会很糟糕。

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

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

相关内容

最新更新

热门标签：