пвсевдо аякс для перезагрузки страниц на сайте

 
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 3396
Привет сообщество..
Для одного проекта нужно сделать пвсевдо аякс для перезагрузки страниц на сайте
То есть с эффектом затухания и появления при переходе ото одной странице к другой
Цена и срок
Дизайн для Инстант = Я зарабатываю тут =
= Уроки для Конструктора тем =
Посетитель
small user social cms
МедальКубок зрительских симпатийПочетный донор проекта
Сообщений: 818
решение вот такое

Код JAVASCRIPT:
  1.  
  2. $("#mask").css("display", "block");
  3. $("#mask").fadeOut(1000);
  4.  
  5. $("a").click(function(event){
  6. event.preventDefault();
  7. linkLocation = this.href;
  8. $("#mask").fadeIn(1000, redirectPage);
  9. });
  10.  
  11. function redirectPage() {
  12. window.location = linkLocation;
  13. }
  14.  
ну и сам блок
Код HTML:
  1. <div id="mask" style="position: absolute; display: none; width: 100%; height: 100%; top: 0; left: 0; background-color: #bbb; z-index: 20;"></div>
Редактировалось: 2 раз (Последний: 4 августа 2012 в 10:17)
Компоненты, модули, шаблоны, разработка на заказ - широкий выбор всего
Реклама
cms
Посетитель
small user social cms
МедальКубок зрительских симпатийПочетный донор проекта
Сообщений: 818
второй вариант:
1. нужно исправить стили для body
Код CSS:
  1. body { display: none; }
2. делаем инициализацию джиквери и показываем нашу страницу при загрузке
Код JAVASCRIPT:
  1.  
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4. $("body").css("display", "none");
  5. $("body").fadeIn(2000);
  6. });
  7. </script>
  8.  
в скрипте 2000 это 2 сек. можно эксперементировать с этим значением.

Теперь осталось добавить событие для ссылок чтобы сделать переходы. и в конечном счете наш скрипт немного видоизменится и примет вот такой законченный вариант.

Код JAVASCRIPT:
  1.  
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4. $("body").css("display", "none");
  5.  
  6. $("body").fadeIn(2000);
  7.  
  8. $("a.transition").click(function(event){
  9. event.preventDefault();
  10. linkLocation = this.href;
  11. $("body").fadeOut(1000, redirectPage);
  12. });
  13.  
  14. function redirectPage() {
  15. window.location = linkLocation;
  16. }
  17. });
  18. </script>
  19.  
Финальный штрих добавим темный фон для html
Код CSS:
  1.  
  2. html {
  3. /*используйте этот цвет, если у Вас фон черный или около того*/
  4. background-color: #000000;
  5. }
  6.  
Редактировалось: 3 раз (Последний: 4 августа 2012 в 10:18)
Компоненты, модули, шаблоны, разработка на заказ - широкий выбор всего
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 3396
Макс спасибо!
Можно расписать для чайников по пунктно что куда в какие файлы:)
Дизайн для Инстант = Я зарабатываю тут =
= Уроки для Конструктора тем =
Посетитель
small user social cms
МедальКубок зрительских симпатийПочетный донор проекта
Сообщений: 818
Все написал в блоге даже поставил демку.
Компоненты, модули, шаблоны, разработка на заказ - широкий выбор всего
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.