Сделать стартовой страницей     Правила сайта    Выйти  





...

Категории раздела

Скрипты и хаки для uCoz [226]

Мини-чат

Наш опрос

Сколько вам лет?
Всего ответов: 46

Новые сайты


Категория : Отдых и развлечения
Клан ксс [SPb]™*

     Переходов на сайт : 27

Категория : Интернет
Кино онлайн

     Переходов на сайт : 16

Категория : Культура и искусство
1o.uСoz.Ru

     Переходов на сайт : 22


                                                

Всё о ЯБ - ya-browser.3dn.ru

Шаблоны и скрипты для uCoz

Главная » Файлы » Скрипты и хаки для uCoz » Скрипты и хаки для uCoz

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

Как установить шаблон на сайт ?  Как вставить скрипт на сайт ?



Установка:
Ставим куда Вам нужно в коде страници:
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;   
   }

Demo



HTML-cсылка на публикацию
BB-cсылка на публикацию
Прямая ссылка на публикацию

Категория: Скрипты и хаки для uCoz | Добавил: ORIGINAL98RUS
Просмотров: 928 | Загрузок: 0 | Рейтинг: 3.0/1

Всего комментариев: 0




Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Мини-профиль

Гость !



Группа:
Гости

Время: 22:03

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!

Поиск

Сообщество

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

[ Кто нас сегодня посетил ]

Наш баннер

1o.uCoz.Ru|Сайт помощи в системе uCoz



Graffiti Decorations(R) Studio (TM) Site Promoter

                                                                                            
Все права сохранены , не лицензионное
копирование запрещено законами
Р.Ф.
(без первоисточника) ! Сайт помощи в системе
uCoz  и не только.1o.uCoz.Ru 2010-2010г.(by "ORIGINAL98RUS")
Хостинг от uCoz 

                                                                                                
Рейтинг@Mail.ru Яндекс цитирования