08.09.2011, 23:13 | |||||
Эффект отгибающегося уголка страницы с помощью 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; } Где subscribe.png изображение рекламы под уголком (картинка вашей рекламы должна быть по размерам такой же) Демо просмотр Материал взят с сайта infoscript.ru
Теги: Скачать Эффект отгибающегося уголка страницы с помощью JQuery
| |||||
Категория: Скрипты uCoz | Просмотров: 3096 | Добавил: Атом | Рейтинг: 5.0/1 | | |||||
Всего комментариев: 4 | ||
|
Кроме того, материал перепечатывали с сайта на сайт, ставили... файл можно найти на Вэбочке (название tables_tablichki_dli_foruma.js).