Главная » Файлы » Прочие скрипты » jQuery

Ещё один тип подсказок внутри картинки при наведении через библиотеку jQuery Easing
23.06.14, 08:29:30

Скачать файл




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



Для начала посмотрите ДЕМО

Установка:

После /head на нужных вам страницах вставляйте:
Код
<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>


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


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

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: внутри, Ещё, при, Через, Тип, наведении, Один, подсказок, картинки, библиотеку
Просмотров: 256 | Загрузок: 1 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: