Кроссбраузерный плавный переход между страницами - Хаки, модули, скрипты, шаблоны для UcoZ - :: Информационные технологии - Форум нового поколения

Пятница, 30.07.2010, 17:55

Приветствую Вас Persona | RSS


Главная FORUM		Новые сообщения	Участники	Правила форума	Поиск	RSS

Страница 1 из 1

Форум нового поколения - 1GiG.net » :: Информационные технологии » Хаки, модули, скрипты, шаблоны для UcoZ » Кроссбраузерный плавный переход между страницами

Кроссбраузерный плавный переход между страницами

nedd

Дата: Вторник, 20.01.2009, 11:03 | Сообщение # 1

Заглянувший

Сообщений: 1

Репутация: 0

Пол:

Страна: Российская Федерация

С нами с 20.01.2009

Не на сайте =(

Предположим, необходимо реализовать плавный переход между страницами. То есть одна страница плавно исчезает, а после этого так же плавно появляется другая. Ссылка на пример: http://www.art.webobzor.net/example/page/index.html

Код такого скрипта размещен ниже:

<body style='filter:alpha(opacity=0); opacity: 0'>
...
<a href='javascript:go_to("page.html")'>ссылка</a>
...
</table>

</body>

var m = 0;
var t;
var go;

function show() {

m++;
document.body.style.opacity = m/100;
document.body.style.filter="alpha(opacity="+m+")";
t = setTimeout("show()",3);
if (m>=100) clearTimeout(t);

}

function hide() {

m--;
document.body.style.opacity = m/100;
document.body.style.filter="alpha(opacity="+m+")";
t = setTimeout("hide()",5);
if (m<=0) {

clearTimeout(t);
location.href = go;

}

function go_to(url) {

clearTimeout(t);
go = url;
hide();

}

show();

</script>

Теперь по порядку. Для начала, мы делаем body невидимым, устанавливая его прозрачность:

После этого, любая ссылка, с которой происходит плавный переход на другую страницу, должна иметь следующий вид:

<a href='javascript:go_to("page.html")'>ссылка</a>

где page.html - адрес ссылаемой страницы. Разумеется, данный скрипт должен быть установлен и на странице page.html.

Скрипт состоят из трех функция. Функция show() вызывается сразу же в конце страницы и путем изменения прозрачности

m++;
document.body.style.opacity = m/100;
document.body.style.filter="alpha(opacity="+m+")";

добивается плавного появления страницы. После того, как значение прозрачности достигло 100%, выполнение функции прекращается

if (m>=100) clearTimeout(t);

Функция go_to() как вы могли заметить, получает управление, при нажатии на ссылку. Данная функция сохраняет параметр url (адрес страницы, куда необходимо будет перейти) и вызывает функцию hide().

Функция hide() выполняет действия, обратные функции show(), то есть выполняет эффект плавного затухания страницы. В отличии от функции show(), после того как страница полностью исчезла, происходит переход на другую страницу:

if (m<=0) {

clearTimeout(t);
location.href = go;

}

Скрипт работает под любыми браузерами!!!! В некоторых быстрее, в некоторых медленнее. Для регулировки скорости плавного перехода, можно задать соответствующие параметры в setTimeout.

Источник: webobzor.net
===========================================================
Можно изменить шаг прозрачности в функциях show и hide и ускорить работу функции -
function show() {

m++;
document.body.style.opacity = m/10;
document.body.style.filter="alpha(opacity="+10*m+")";
t = setTimeout("show()",1);
if (m>=10) clearTimeout(t);

}

function hide() {

m--;
document.body.style.opacity = m/10;
document.body.style.filter="alpha(opacity="+10*m+")";
t = setTimeout("hide()",5);
if (m<=0) {
clearTimeout(t);

В IE работает медленнее, чем в Firefox

Источник: profy.ucoz.ru

GIGmoney за сообщения :