02.07.2012, 12:21
|
Новичок на форуме
|
|
Регистрация: 02.07.2012
Сообщений: 5
|
|
Остановка/ возобновление анимации фона
Имеется плавная смена картинки фона сайта. Но при определенных обстоятельствах она отвлекает (всплывает скрытый DIV с фото галереей). Очень хочется ее временно остановить, например запустив функцию, а после также успешно восстановить. Остановить ее получается, а вот запустить обратно без перезагрузки страницы - не выходит. Подскажите плз. что можно сделать?
var aImages = new Array();
var iPrev = -1;
var iRnd = -1;
aImages[0] = "images/1.jpg";
aImages[1] = "images/2.jpg";
aImages[2] = "images/3.jpg";
aImages[3] = "images/4.jpg";
aImages[4] = "images/5.jpg";
aImages[5] = "images/6.jpg";
aImages[6] = "images/7.jpg";
$(document).ready(function() {
$("img#bg").load(function()
{
$("img#bg").fadeTo(2000,1);
setTimeout(function()
{
$("img#bg").fadeOut(2000);
setTimeout(LoadImages,2500);
}
,5000);
}
)
setTimeout(LoadImages,1000);
});
function LoadImage(iNr)
{
$("img#bg").attr("src", aImages[iNr]);
};
function LoadImages()
{
/* Select a random image number and make sure this is not equal to the previous image */
while(iPrev == iRnd)
{
iRnd = Math.floor(Math.random()*aImages.length);
}
/* Show the selected image */
LoadImage(iRnd);
iPrev = iRnd;
};
НТМL:
<img src="" alt="background" id="bg" style="display:none" />
CSS
Код:
|
img#bg {
/* Stretch background */
position: fixed;
top:0;
left:0;
width:100%;
z-index:-3;
} |
|
|
02.07.2012, 12:32
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
san256,
1.Вариант классический: При запуске фотогалереи под нее подсовываем полупрозрачный тёмный фон скрывающий все отвлекающие факторы
2. Не увидел Ваших попыток останова - поэтому неясно что править
|
|
02.07.2012, 12:45
|
Новичок на форуме
|
|
Регистрация: 02.07.2012
Сообщений: 5
|
|
Сообщение от Deff
|
san256,
1.Вариант классический: При запуске фотогалереи под нее подсовываем полупрозрачный тёмный фон скрывающий все отвлекающие факторы
2. Не увидел Ваших попыток останова - поэтому неясно что править
|
Спасибо за ответ
По-первому варианту, такая идея меня посещала - это на случай того, если остановить с последующим успешным возобновлением не выйдет.
По-второму, попытки не считаются удавшимися, если анимация в принципе не возобновляется.
|
|
02.07.2012, 12:47
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
Сообщение от san256
|
По-второму, попытки не считаются удавшимися, если анимация в принципе не возобновляется.
|
Выложите неудачную - посколь нужно откуда то плясать
|
|
02.07.2012, 16:13
|
Новичок на форуме
|
|
Регистрация: 02.07.2012
Сообщений: 5
|
|
работает, но не знаю, совсем не изящно на мой взгляд, в этом деле я новичок, но по другому не смог придумать, как подменить переменные при загрузке изображения, при котором условие не может быть выполнено, в итоге анимация не останавливается, а просто нечего "анимировать". На страничке имеется две кнопочки. Одна вызывает функцию openGal (), другая соответственно функцию closedGal().
var iRnd = -1;
<!-- off galery-->
function closedGal() {
iRnd = 0;
$('.example').fadeOut(800);
$('#content').fadeIn(800).css({display:'block'});
LoadImages();
st();
};
<!-- on galery-->
function openGal () {
$('.example').fadeIn(800);
$('#content').css({display:'none'});
iRnd = 0.5;
};
<!--анимация фона-->
var aImages = new Array();
var iPrev = -1;
aImages[0] = "images/1.jpg";
aImages[1] = "images/2.jpg";
aImages[2] = "images/3.jpg";
aImages[3] = "images/4.jpg";
aImages[4] = "images/5.jpg";
aImages[5] = "images/6.jpg";
aImages[6] = "images/7.jpg";
$(document).ready(function st() {
$("img#bg").load(function()
{
$("img#bg").fadeTo(2000,1);
setTimeout(function()
{
$("img#bg").fadeOut(2000);
setTimeout(LoadImages,2500);
}
,5000);
}
)
setTimeout(LoadImages,1000);
});
function LoadImage(iNr)
{
$("img#bg").attr("src", aImages[iNr]);
};
function LoadImages()
{
/* Select a random image number and make sure this is not equal to the previous image */
while(iPrev == iRnd)
{
iRnd = Math.floor(Math.random()*aImages.length);
}
/* Show the selected image */
LoadImage(iRnd);
iPrev = iRnd;
};
Последний раз редактировалось san256, 02.07.2012 в 16:17.
|
|
02.07.2012, 16:39
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
san256,
Так - Пойдёт ?
<!--анимация фона-->
var aImages = new Array();
var iPrev = -1;
aImages[0] = "images/1.jpg";
aImages[1] = "images/2.jpg";
aImages[2] = "images/3.jpg";
aImages[3] = "images/4.jpg";
aImages[4] = "images/5.jpg";
aImages[5] = "images/6.jpg";
aImages[6] = "images/7.jpg";
var TimmmerID;
$(document).ready(function st() {
$("img#bg").load(function()
{
$("img#bg").fadeTo(2000,1);
TimmmerID=setTimeout(function()
{
$("img#bg").fadeOut(2000);
setTimeout(LoadImages,2500);
}
,5000);
}
)
setTimeout(LoadImages,1000);
});
function LoadImage(iNr)
{
$("img#bg").attr("src", aImages[iNr]);
};
function LoadImages()
{
/* Select a random image number and make sure this is not equal to the previous image */
while(iPrev == iRnd)
{
iRnd = Math.floor(Math.random()*aImages.length);
}
/* Show the selected image */
LoadImage(iRnd);
iPrev = iRnd;
};
<!-- on galery-->
function openGal () {
clearTimeout(TimmmerID);
};
<!-- off galery-->
function closedGal() {
$("img#bg").load();
};
Последний раз редактировалось Deff, 02.07.2012 в 16:41.
|
|
03.07.2012, 16:21
|
Новичок на форуме
|
|
Регистрация: 02.07.2012
Сообщений: 5
|
|
отлично! Работает. Вот только иногда глючит... не пойму из-за чего Спасибо )
|
|
03.07.2012, 17:11
|
Новичок на форуме
|
|
Регистрация: 02.07.2012
Сообщений: 5
|
|
вопрос новичка
одного не пойму, каким образом функция load(function(){}) постоянно повторяется? Она по идее, нигде сама себя не вызывает...
|
|
03.07.2012, 17:27
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
Сообщение от san256
|
одного не пойму, каким образом функция load(function(){}) постоянно повторяется? Она по идее, нигде сама себя не вызывает..
|
$("img#bg").load() - инициализирует событие принудительно
|
|
|
|