Ваш логин:Гость
Ваше имя:Гость
Ваша група:Гости
Ваш IP адрес:54.224.121.67
У вас нет непрочитанных сообщений
[
Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Архив - только для чтения
Форум » Форум на edik2009.at.ua » Скрипты для UCOZ » Тип подсказок внутри картинки при наведении через библиотеку
Тип подсказок внутри картинки при наведении через библиотеку
edik2009Дата: Воскресенье, 15.08.2010, 13.46.50 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 74
Награды: 18
Репутация: 27
Статус:

Ещё один вид подсказок внутри картинок при наведении. На этот раз всё осуществляется через библиотеку эффектов jQuery Easing. Честно говоря, скрипт порадовал тем, что выводит и название картинки сверху, и краткое описание снизу.

Установка:

После /head на нужных вам страницах вставляйте:

Code
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>  
   <script>  
   $(document).ready(function () {  

   // transition effect  
   style = 'easeOutQuart';  

   // if the mouse hover the image  
   $('.photo').hover(  
   function() {  
   //display heading and caption  
   $(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});  
   $(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});  
   },  

   function() {  
   //hide heading and caption  
   $(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});  
   $(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});  
   }  
   );  

   });  
   </script>  
   <style>  
     
   .photo {  
   position:relative;  
   font-family:arial;   
   overflow:hidden;  
   border:5px solid #000;  
   width:350px;  
   height:233px;  
   }   
     
   .photo .heading, .photo .caption {  
   position:absolute;  
   background:#000;  
   height:50px;  
   width:350px;  
   opacity:0.6;  
   }  
     
   .photo .heading {   
   top:-50px;  
   }  

   .photo .caption {   
   bottom:-50px;   
   left:0px;  
   }  
     
   .photo .heading span {  
   color:#26c3e5;   
   top:-50px;  
   font-weight:bold;  
   display:block;  
  font-size:15px;  
   padding:5px 0 0 10px;  
   }  
     
   .photo .caption span{  
   color:#999;   
   font-size:11px;  
   display:block;  
   padding:5px 10px 0 10px;  
   }  
     
   </style>

Сама картинка прописывается следующим образом:

Code
<div class="photo">  
   <div class="heading"><span>Название картинки</span></div>  
   <img src="Ссылка на картинку">  
   <div class="caption"><span>Здесь любое ваше описание</span></div>  
  </div>

Осталось лишь залить скрипт из прикреплённого архива в папку js

Источник материала: apocalypse.ucoz.kz

http://depositfiles.com/files/w1684724p


 
Форум » Форум на edik2009.at.ua » Скрипты для UCOZ » Тип подсказок внутри картинки при наведении через библиотеку
Страница 1 из 11
Поиск:

Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
  • Заказы (9999)
  • Заказы (287)
  • Флудилка (2)
  • Скачать SWAT 4 Gold Edition бесплатно (2)
  • Предсказания Нострадамуса на XXI век (1)
  • Непонятный мне баг... (1)
  • Форма добавления комментариев (Сборка от Apocalypse) (0)
  • Новички на сайте 2.5 by Apocalypse для uCoz (0)
  • Шаблон социальной сети UcozSocial для ucoz (0)
  • CS шаблон для сайтов системы ucoz с рабочим конструктором (0)
  • Флудилка (2)
  • Заказы (287)
  • Заказы (9999)
  • Новый вид "Доступ ЗАПРЕЩЕН" для ucoz (0)
  • Новый вид Технических работ для Ucoz (0)
  • Очень красивый шаблон Aebox (0)
  • win-x Original (0)
  • Синий шаблон WAREZ by alex-net (0)
  • Адаптация шаблона сайта avant-group под ucoz (0)
  • Адаптация шаблона qeek (ucoz) (0)
  • edik2009
  • dima2009
  • AHTNXPNCT
  • Foxit-Kill
  • milashka
  • Milenius
  • YasyA
  • Vadimka
  • Жора
  • Fd-GOD
  • Mrakoris
  • fghfghfghgfh
  • CS6562
  • fanatik
  • LeaN1n
  • 4epen
  • Grinvic
  • Hacker
  • ₣Ą[N]ĄŤ
  • UzJaR
  • Бабай
  • awesome
  • MrFreeman
  • Ven
  • pushok
  • -angel-
  • DANGEREST
  • Andy
  • MifLegend
  • ISLAMGAGIEV
  • Xaker
  • andryxa95
  • pankv2010
  • Tolya
  • K_n1fe
  • [p47]serega
  • VENUIAH
  • RiseOFGlory
  • kirill22kirill
  • Dun0s
  • sashashvetzov201722.43.14
    mrvolkov49006.14.51
    olegafox14.40.14
    admin247418.56.50
    viktor11101.46.56
    AD23.39.23
    Антон18.35.25
    Древний_лавочник18.40.17
    milashka02.02.30
    edik2009354422.09.16
    Kornel17.23.40
    Plyamchik03.16.20
    LOverwow17.26.27
    RaDig17.25.09
    techadmin20.48.49
    MASTER11.48.09
    Vovan4ik-33318.07.55
    vital08.50.35
    Дмитрий20.03.11
    sadiar15.25.47



    Copyright edik2009.at.ua © 2009-2017
    Хостинг от uCoz
    [ Для правообладателей! ]
    Владельцы и создатели данного сайта не несут ответственность за использование и содержание ссылок и информации, представленных на этом сайте, а также за возможное игнорирование пользователями коммерческого статуса программного обеспечения, к которому ведут ссылки, представленные на данном сайте.