打开手风琴选项卡时使背景图像淡入淡出并消失

Question

我正在使用该网站，并且添加了两个逐渐消失的背景图像。 这是链接： www.alexarodulfo.com 。 但是，我想看看是否：1）可以使淡入淡出更加微妙，就像它们实际上在加载时逐渐淡入淡出以及它们彼此重叠时一样。 2）每当您打开菜单上的手风琴标签时，都有可能使它们消失，并在它们全部关闭时使它们再次出现。 这是我用于背景图片淡入的代码：

<style>

body{
background-repeat: no-repeat;
background-position: 200 100;}

</style>

<script type="text/javascript"> 
// (C) 2006 CodeLifter.com

var speed = 6000;
var crossFadeDuration = 10;
var Pic = new Array();

Pic[0] = 'images/back_2.png';
Pic[1] = 'images/back_1.png';

var t;
var j = 0;
var p = Pic.length;

var preLoad = new Array();
for (i = 0; i < p; i++){
   preLoad[i] = new Image();
   preLoad[i].src = Pic[i];}

function runSlideShow(){

if (document.all){
    document.body.style.filter="blendTrans(duration=crossFadeDuration)";
    document.body.filters.blendTrans.Apply();
    document.body.filters.blendTrans.Play();}  

if (document.body){
    document.body.background = Pic[j];    
    j = j + 1
    if (j > (p-1)) j=0
    t = setTimeout('runSlideShow()', speed)}    

} 
</script>

</head>

<body onload="runSlideShow()"></body>
</head>

谢谢！ 苏菲

Answer 1

如果您愿意以不同的方式构建网站，则可以使用z-index并将图像堆叠在内容后面，但不设置为背景图像。 您可以将它们放在div中。

Answer 2

使用单独的div并将其与z-index重叠实际上可以正常工作。 我添加了Jquery Cycle插件：

    <script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>

这里是链接：在背景中淡出

打开手风琴选项卡时使背景图像淡入淡出并消失

问题描述

2 个解决方案

解决方案1
0 已采纳 2011-03-31 20:11:06

解决方案2
0 2011-03-31 21:43:35

打开手风琴选项卡时使背景图像淡入淡出并消失

问题描述

2 个解决方案

解决方案1 0 已采纳 2011-03-31 20:11:06

解决方案2 0 2011-03-31 21:43:35

解决方案1
0 已采纳 2011-03-31 20:11:06

解决方案2
0 2011-03-31 21:43:35