Javascript для смены картинок и немного математики

22 Май
2012

Здравствуйте. Я хотел бы рассказать вам об одной из задач, с которой мне пришлось столкнуться.
Задача состояла в следующем:
— Имеется блок div с фоновым изображением, прописаным в атрибуте background.
— Необходимо менять изображения через определенные промежутки времени.
Естественно, что многие посоветуют для этих целей jQuery. Но я решил пойти немного другим путем,
так как, найденные мной решения для jQuery, работали не с атрибутом background а со сменой изображения в теге .

Итак, начнем. Имеем 3 изображения, назовем их: bg1.jpg, bg2.jpg, bg3.jpg.
Сначала я попытался просто менять изображения через document.getElementById(‘id’).style.cssText, но смена изображений происходила слишком резко, поэтому я решил менять параллельно прозрачность изображений.

Теперь кратко изложу суть метода. Мы будем менять прозрачность изображения так же как и функция cos(x), при этом, смена изображения будет происходить при переходе функции cos(x) через 0.

В итоге получилось следующее:
var i=0;
var step=0.006; // шаг с которым идет прибавление аргумента
var x=0;

var corr=8000; // константа
var timeout=step*corr; // время выполнения (зависит от шага и от кол-ва шагов)

// каждые timeout мс изменяем шаг на величину step

var opacity=100; // 100 потому что IE считает прозрачность от 0 до 100

function change()
{
x=x+step;
opacity=Math.abs(Math.cos(x));
curr=Math.cos(x); //текущее значение
next=Math.cos(x+step); // следующие значение
opacity=opacity*100;

if(((curr>0 && next<0) || (curr<0 && next>0))) //определение точки перегиба.
{
i++;
}
switch (i)
{
case 0:
stl="background: url('images/bg1.jpg')";
break;
case 1:
stl="background: url('images/bg2.jpg')";
break;
case 2:
stl="background: url('images/bg3.jpg')";
break;
default:
stl="background: url('images/bg1.jpg')";
break;
}
document.getElementById("header").style.cssText=stl;
document.getElementById("header").style.opacity = opacity/100;
document.getElementById("header").style.filter = 'alpha(opacity='+opacity+')';
if(i==3){ i=0 }
}
setInterval(change,timeout);

Меняя значения переменных step и corr можно добиться любых скоростей смены изображений и уменьшения/увеличения прозрачности.

Строго говоря, можно использовать абсолютно любую периодическую функцию для подобных экспериментов, причем за счет выбора как функции, так и ее констант, можно реализовать практически (не уверен точно что любой, поэтому предпочту использовать слово «практически») любой закон изменения изображений в совокупности со сменой их прозрачности.

Сразу хочу предупредить, что при использовании функций, не имеющих 0 на оси Ох, следует вычислять производную в текущей и следующей точках (по формуле: (f(x+x1)-f(x))/x), а не само значение функции.

Внимание: Я не претендую на то, что данная функция оптимальна по скорости работы, просто мне хотелось продемонстрировать как математика, даже школьного курса, может помочь решить некоторые прикладные задачи. Кстати, да, код рабочий, я проверял.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх