На главную

Новости

Рейтинг

Каталог

Статьи

Графика

Веб инструменты

Обратная связь

покупка яхты или катера | отдых и туры в Швейцарию летом | Московский кадровый центр персонала | импортер запчасти к грузовикам Mack и Volvo | туры Казахстан и Узбекистан

	Статьи
	Веб дизайн
	Интернет
	Продвижение сайта
	Java Script
	Apache
	PHP
	MySQL
	Веб технологии
	Эксперименты

	Проекты
	Дистрибутивы Форум веб мастеров Гостевая книга Определить PageRank Определить ТИЦ Проверить IP адрес Whois сервис

	Реклама
	777

	Наши друзья
	PhpScript.com.ru GoldPages.com.ru

Webobzor.net -> Статьи -> Java Script

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

25.06.2007 18:42

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

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

<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.

webobzor.net

Комментарии: [17]

	MG	30.06.2007 18:16
	Товарищ афтор, я просто в диком восторге! Вроде и нафиг ненужная функция, а вот заело меня, почему сделанные переходики только в IE работают! И начал я рыть инет в поиске кроссбраузерности - ничего совсем. И тут вдруг такая находка! Спасибо тебе за труды.

	lexa	30.06.2007 19:48
	Рады стараться :)

	bagfinder	02.07.2007 22:18
	Привет, скажи, как использовать данный код в сайте, созданном в сар, например ucoz.ru. там ссылки имеют вид http://сайт.ucoz.ru/index/0-2 и так далее...

	lexa	02.07.2007 22:36
	Если автоматом созданы, то боюсь что никак

	vad	24.07.2007 21:04
	Автор, Вам не сложно связаться со мной по асе 806579

	gl	25.07.2007 13:35
	привет! класно! а как с одного окна переключится на другое,уже открытое окно?

	DiViLiX	07.08.2007 15:45
	нормальная фича. Мне понравилась.

	FreeTime	26.08.2007 20:48
	Получается на моем сайте(система ucoz) это практически не возможно?!

	lexa	02.09.2007 16:10
	почему, ты же можешь вставлять js код в страницы своего сайта, или нет?

	DOKtoR_B	03.09.2007 00:36
	lexa, не подскажешь ка сделать чтобы функция hide вызывалась при закрытии страницы, то есть страница перед закрытием исчезает (можно реализовать фото галерею на фреймах, во фрейме жмешь маленькую картинку, в другом все исчезает затем появляется по show!)?

	DOKtoR_B	04.09.2007 00:44
	p.s. OnUnload почемуто hide() не вызывает! (

	lexa	04.09.2007 02:10
	и не будет плавного уходить просто так, при нажатии на ссылку происходит моментальный переход

	redmaster	15.09.2007 17:41
	Можно сделать плавный переход между страницами и тегами META но он будет виден только в IE !!!

	lexa	17.09.2007 19:14
	да, поэтому от него никакого толку )

	woland	04.10.2008 01:39
	lexa, просто замечательная вещь...только, вот, возникло несколько проблем! Ну, во-первых, при нажатии на кнопку " назад" браузера (у меня ff, в другом не пробовал), появляется просто фон, а содержимое отображается только после нажатии кнопки "обновить". Точно такая же беда с javascript-кнопками "назад" на самих страницах. Подскажи пожалуйста в чем причина! Заранее огромное спасибо!)

	Rubman	24.11.2008 11:06
	Спасибо!!

	Владимир	27.11.2008 13:01
	Привкольной эффект

Добавить комментарий: