Время: 17:39
Вы вошли как Гость | Группа "Гости"Приветствую Вас Гость | RSS
Меню сайта
Популярное
Movavi Video Convert...
Antares Autotune 5.0...
Базис мебельщик 7.0 ...
SONY Vegas Pro 12.0 ...
Статистика


Главная Файлы Все для Ucoz Скрипты для Ucoz



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

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

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

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

Code
<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: 


Code
#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;  
  }

Категория: Скрипты для Ucoz
Просмотров: 1671 | Дата: 02.10.2010 | Рейтинг: 3.0/2

Похожие материалы:
Поделись ссылкой

  • - ссылка
  • - BBCode
  • - HTML
  • Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]
    Мини - профиль
    Поиск

    Опрос
    Из какой поисковой системы вы к нам попали?
    Всего голосовало: 4041