Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

Мы собираем и публикуем материалы не только на сайте, но и в нашей группе Вконтакте, нужно отметить то, что на сайте публикуются не все материалы, небольшая часть выкладывается только в группе.

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Разные скрипты » Эффект отгибающегося уголка страницы с помощью JQuery

Эффект отгибающегося уголка страницы с помощью JQuery

Опубликовал: artCreative™
Категория: Разные скрипты
Дата: 19 Июня 2025 в 02:25

0 голосов

Поставив этот скрипт вы можете в последствии туда засунуть любую вашу рекламу и т.д.

Установка:
Ставим куда Вам нужно в коде страницы.

div id="pageflip">
  <a href="ссылка на рекламу">
  <img src="/page_flip.png" alt="" />
  <span class="msg_block">Subscribe via RSS</span>
  </a>
  </div>
  <script type="text/javascript" src="/jquery-latest.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
  $("#pageflip").hover(function(){//При наведении мышкой...
  $("#pageflip img , .msg_block").stop()
  .animate({//Анимировать и расширять msg_block (Ширина + высота)
  width:'307px',
  height:'319px'
  }, 500);
  } , function(){
  $("#pageflip img").stop()//Когда мышь не на уголке - вернуться к исходным размерам 50x52
  .animate({
  width:'50px',
  height:'52px'
  }, 220);
  $(".msg_block").stop()//то же самое, но только это относится к внутреннему контенту уголка (50x50)
  .animate({
  width:'50px',
  height:'50px'
  }, 200);
  });
  });
  </script>

Установка:
Там гдеpage_flip.pngставим рисунок рекламы, которая Вам нужна!

А это ставим в CSS:

#pageflip {
  position: relative;
  }
  #pageflip img {
  width: 50px; height: 52px;
  z-index: 99;
  position: absolute;
  right: 0; top: 0;
  -ms-interpolation-mode: bicubic;
  }
  #pageflip .msg_block {
  width: 50px; height: 50px;
  position: absolute;
  right: 0; top: 0;
  background: url(/subscribe.png) no-repeat right top;
  text-indent: -9999px;
  }

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 637 « Назад

Теги материала: jquery, уголка, эффект, отгибающегося, помощью, страницы

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Разные скрипты » Эффект отгибающегося уголка страницы с помощью JQuery

Эффект отгибающегося уголка страницы с помощью JQuery

Комментарии пользователей