当您打开手风琴选项卡时，使背景图像淡入加载并消失

发布于 2024-10-28 12:43:21 字数 1209 浏览 5 评论 0原文

我正在使用这个网站，并添加了两个交叉淡入淡出的背景图像。这是链接：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>

谢谢！苏菲

原文

I am working with this website and I added two background images that cross fade. Here is the link: www.alexarodulfo.com.
However, I wanted to see if:
1) It is possible to make the fade in more subtle, like they actually fade slowly onload and when they overlap one another.
2) It is possible to make them disappear whenever you open an accordion tab on the menu and make them appear again when they are all closed.
This is the code that I am using for the background images fade in:

<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>

Thanks!
Sophie

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

完美的未来在梦里 2024-11-04 12:43:21

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

回复收藏 0 原文

情深缘浅 2024-11-04 12:43:21

使用单独的 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>

这是链接：淡入背景

Using separate div and overlapping them with z-index it actually worked. I added the Jquery Cycle plug in:

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

Here is the link: fade in background

回复收藏 0 原文

~没有更多了~