Вы наверняка знаете, что такое Google Chrome и возможно даже пользуетесь им. Тогда Вам должен быть хорошо известен Интернет-магазин Chrome, так вот там применяется следующий эффект — при наведении курсора мыши на миниатюру расширения, снизу «выезжает» панель с описанием и кнопкой добавить. В этом уроке реализуем такой эффект тремя способами:

- на CSS3;
- с помощью jQuery;
- и MooTools.

Базовый HTML и CSS

Как обычно начнем с базовой разметки HTML и основных стилей CSS. Будем использовать минимум элементов в этом коде:

<div class="item">
   <a href="/angry-birds">
      <div class="item-billboard">
         <img src="angrybirds.jpg" />
         <h3>Angry Birds</h3>
      </div>
      <div class="item-detail">
         <p>Текстовый блок внутри элемента DIV!</p>
      </div>
   </a>
</div>

Базовых стилей CSS не так много:

.item {
position: relative;
width: 240px;
overflow: hidden;
border: 1px solid #ccc;
}
.item {
height: 200px;
}
.item a {
text-decoration: none;
color: #000;
}
.item-billboard, .item-detail {
padding: 10px;
height: 180px;
}
.item-billboard {
margin-top: 0;
background: #fff;
}
.item-billboard h3 {
font-size: 13px;
font-weight: bold;
color: #262626;
font-family: "Open Sans", arial, sans-serif;
}
.item-detail {
background: #ececec;
}

Способ 1: CSS3

Оживляем «выезжающую» панель с помощью анимации CSS3.

.item-billboard {
  margin-top: 0;
  background: #fff;
  
  /* добавляем анимацию! */
  -webkit-transition-property: margin-top;
  -webkit-transition-duration: .5s;
  
  -moz-transition-property: margin-top;
  -moz-transition-duration: .5s;
  
  -o-transition-property: margin-top;
  -o-transition-duration: .5s;
  
  -ms-transition-property: margin-top;
  -ms-transition-duration: .5s;
}

/* анимация при наведении */
.itemCss:hover .item-billboard {
  margin-top: -200px;
}

На этом можно было бы завершать урок, но к сожалению нам не повезло, есть на свете Internet Explorer и с ним приходиться считаться. В этом нам поможет MooTools и JQuery!

Способ 2 и 3: jQuery и MooTools

Подключаемся к библиотекам этих фрэймворков с помощью все того же Google и используем нижеследующий код:

// MooTools
window.addEvent("domready", function() {
  $$(".itemJs").addEvents({
    mouseenter: function() {
      var billboard = this.retrieve("billboardElement");
      if(!billboard) {
        billboard = this.getElements(".item-billboard")[0];
        this.store("billboardElement", billboard);
      }
      billboard.tween("margin-top", "-200px");
    },
    mouseleave: function() {
      this.retrieve("billboardElement").tween("margin-top", 0);
    }
  });
});

// jQuery
jQuery(document).ready(function() {
  jQuery(".itemJQuery").bind({
    mouseenter: function() {
      var self = jQuery(this), billboard = self.data("billboardElement");
      if(!billboard) {
        billboard = jQuery(jQuery(".item-billboard", this)[0]);
        self.data("billboardElement", billboard);
      }
      jQuery(billboard).stop().animate({
        "margin-top": "-200px"
      });
    },
    mouseleave: function() {
      jQuery(this).data("billboardElement").stop().animate({
        "margin-top": 0
      });
    }
  });
});

На этом все! Мне нравится вид и функциональность таких блоков. При необходимости можно сэкономить достаточно много места на странице, используя этот прием. Не забудьте скачать Исходники)

Источник: http://xozblog.ru

Исходники: google-chrome-extension.zip

Добавлено: 08 Апреля 2015 19:11:27 Добавил: Андрей Ковальчук Нравится 0

Добавить