Скачать книгу |
|
|
Форма входа |
|
|
Наш опрос |
|
|
Статистика |
Онлайн всего: 1 Гостей: 1 Пользователей: 0
|
|
|
| | |
| Главная » 2011 » Февраль » 23 » Эффект отгибающегося уголка страницы с помощью JQuery для ucoz
21:20 Эффект отгибающегося уголка страницы с помощью JQuery для ucoz |
Начнем с html (можна создать глобальный блок) 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> В 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; }
|
Просмотров: 1466 |
Добавил: gipervovanishe
| Теги: Эффект отгибающегося уголка
| Рейтинг: 0.0/0 |
| |
| | |
|