Эффект плавного перехода можно реализовать не только для изображений, но и вообще для страницы. Предположим, необходимо реализовать плавный переход между страницами. То есть одна страница плавно исчезает, а после этого так же плавно появляется другая.
Код такого скрипта размещен ниже:
< body style='filter:alpha(opacity=0); opacity: 0'>
...
< a href='javascript:go_to("page.html")'>ссылка< /a>
...
< /table>
< /body>
< script language='javascript'>
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 невидимым, устанавливая его прозрачность:
< body style='filter:alpha(opacity=0); opacity: 0'>
После этого, любая ссылка, с которой происходит плавный переход на другую страницу, должна иметь следующий вид:
< 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.
О сайте
Постоянные ссылки
При копировании ссылка на TeaM RSN обязательна!
Оставить комментарий
Вы должны войти, чтобы оставить комментарий.