Любовь к спорту на всю жизнь
Привет, Гость!

  • Страница 1 из 1
  • 1
Форум » Всё для Ucoz » Переключатели страниц для uCoz » Красивая смена страниц с помощью jQuery
Красивая смена страниц с помощью jQuery
Torres_1_Дата: Пятница, 06.08.2010, 01:38 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 2124
Награды: 0
Репутация: 12
Статус: Offline
Делаем плавные переходы с одной страницы на другую с помощью jQuery


И так приступим
HTML и CSS
Для начала поработаем с CSS стилями. Нужно поменять свойства тега body

Код
body { display: none; }


Загрузка визуальных элементов в этом теге не будет осуществляться, это позволяет нам всё спрятать. Если вы используете интернет с отключенным JavaScript, то у вас будет просто пустой экран. Для того чтобы этого не случилось добавляем display:none с помощьюjQuery. И теперь, даже если у вас отключенJavaScript, вы все равно увидите содержимое страницы:
Код
<script type="text/javascript">
     $(document).ready(function() {
        $("body").css("display", "none");
     };);
</script>

Далее подключим jQuery в шапке документа:
Код
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>


И так мы подошли к самому долгожданному, к эффекту смены страниц с помощью jQuery

После того как вы выполнили все предыдущие пункты, следует создать jQuery код, который предоставил бы нам эффектный переход с одной страницы на другую:
Код
<script type="text/javascript">
     $(document).ready(function() {
             $("body").css("display", "none");
            $("body").fadeIn(2000);
     };);
</script>


Данный код можно редактировать под себя, сейчас я вам это покажу:
Первая строка уже была описана выше,
Чуть ниже мы видим fadeIn, то есть метод вызывается за 2 секунды. Можно поиграться с секундами.

И так, на данный момент при загрузке нашей страницы, мы видим небольшой эффект затемнения. Но при нажатии на любую ссылку ничего не происходит.Исправим же это!

Для начала нужно присвоить специальный класс ссылке,которая открывает другую страницу:
Код
<a href="otherPage.html" class="transition">LINK</a>


Вернемся к скрипту:
Код
<script type="text/javascript">
$(document).ready(function() {
     $("body").css("display", "none");

     $("body").fadeIn(2000);

  $("a.transition").click(function(event){
   event.preventDefault();
   linkLocation = this.href;
   $("body").fadeOut(1000, redirectPage);
  };);

  function redirectPage() {
   window.location = linkLocation;
  }
};);
</script>

Мы запросили скрипт отслеживать клики пользователей сайта, по ссылкам с установленнным в скритте классом transition. Если пользователь жмет на ссылку, то скрипт сразу сбивает браузерный редирект, затем сохраняет целевой URL в переменную linkLocation. Затем затемняем body на секунду вызываем redirectPage (это функция, которая переадресовывает пользователя, на необходимую страницу).

Осталось точно настроить скрипт:
Скрипт готов и его можно использовать, но есть еще некоторые нюансы, которые мы сейчас рассмотрим. Созданный нами эффект будет выглядеть намного лучше, если мы установим такой цвет для html тега, который будет очень похож на цвет нашего фона на сайте:

Код
html {
  /*#000000 - черный, можно заменить на любой, для этого найдите в поисковике таблицу HTML цветов и выберите нужный вам цвет*/
  background-color: #000000;
}


Если вдруг вы захотите, чтобы все ссылки открывали страницу с таким эффектом (не только с классом transition), тогда нужно заменить $("a.transition") на $("a").

Скачать необходимые JS и CSS, а так же пример
 
Форум » Всё для Ucoz » Переключатели страниц для uCoz » Красивая смена страниц с помощью jQuery
  • Страница 1 из 1
  • 1
Поиск:
Навигация
Главная страница Форум сайта Создание сайтов на uCoz Заработок в интернете Уроки Photoshop Автомобиль от А до Я Электроника Всё для смартфонов Браузерные игры Музыка Последние комментарии Статистика
Развлечения
Сегодня день рождения у: Описание сайта
Новое на форуме
Опрос
Опрос сайта
Какой у вас браузер?
javascript:; javascript:;
Всего ответов: 176

Общение
Загрузка…
Статистика
Зарег. на сайте
Всего: 267
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них
Администраторов: 1
Модераторов: 0
Проверенных: 1
Обычных юзеров: 264
Из них
Парней: 234
Девушек: 33


Друзья сайта
Возможен баннерообмен 81х31.Писать ЛС.