Заставьте фоновые изображения исчезать при загрузке и исчезать при открытии вкладки аккордеона - PullRequest
Новая
       28

Заставьте фоновые изображения исчезать при загрузке и исчезать при открытии вкладки аккордеона

1 голос
/ 31 марта 2011

Я работаю с этим сайтом, и я добавил два фоновых изображения, которые исчезают. Вот ссылка: 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>

Спасибо! Sophie

Ответы [ 2 ]

0 голосов
/ 01 апреля 2011

Используя отдельный 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>

Вот ссылка: исчезает в фоновом режиме

0 голосов
/ 01 апреля 2011

Если вы хотите структурировать свой сайт по-другому, вы можете использовать z-index и размещать изображения за контентом, но не устанавливать в качестве фонового изображения. Вы можете просто поместить их в div.

...