изменение фонового изображения тела с помощью mootools с эффектом затухания - PullRequest
Новая
       12

изменение фонового изображения тела с помощью mootools с эффектом затухания

1 голос
/ 27 мая 2009

Я изменяю свойство css для фонового изображения с помощью Mootools:

$ (document.body) .setStyle ('background-image', 'url (' + pBackground + ')');

И это работает, но как изменить эффект затухания между изображениями?

Спасибо, Pedro

Ответы [ 3 ]

4 голосов
/ 27 мая 2009

Вы не можете специально исчезнуть фон ... Вы должны исчезнуть элемент, который имеет фон.

В вашей ситуации я бы предложил использовать <div>, который охватывает все в <body> вашего HTML, то есть: 

<html>
<body>
<div id="main">

</div>
</body>

Затем вы можете установить свойство background-image элемента #main div и сделать что-то вроде этого: 

function backgroundChange(pBackground)
{
    var m = $('main');
    var fx = new Fx.Tween(m,{
        duration: 1500,
        onComplete: function(){ 
            m.setStyle('background-image','url(' + pBackground + ')');
            m.fade('in');
        }
    });
    fx.start('opacity',1,0);
}
1 голос
/ 28 мая 2009

Так же, как предупреждение, любые дочерние элементы этого div также будут исчезать, поэтому, если вы хотите, чтобы фон исчезал, а элементы над ним оставались непрозрачными, вам нужно будет абсолютно позиционировать любые дочерние элементы.

Абсолютное расположение всех элементов влечет за собой другие проблемы, когда у вас есть содержимое переменной длины, но есть и обходные пути.

0 голосов
/ 27 мая 2009

Не уверен в том, что я говорю, НО, поскольку он не является частью html-документа, он не является «элементом», поэтому javascript не должен работать с ним.

Но, просто идея, и в зависимости от того, как выглядит ваш сайт, вы можете попытаться установить непрозрачность, имитировать непрозрачность на теле, что может привести к желаемому эффекту.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...